使用JQuery，动态增加列
这也是我在自己学做网站时无意搞出来的，希望可以对别人有所启发
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'table.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
var maxNum = 0;
var minNum = parseInt($(".red_one", this).eq(0).html());
$(".red_one", this).each(function() {
var num = parseInt(this.innerHTML);
if (num > maxNum) {
maxNum = num;
}
if (num < minNum) {
minNum = num;
}
});
var DminNum = (minNum - 1);
var DmaxNum = (maxNum - 1);
var count = (maxNum - minNum) + 1;
$("<td colspan=\""+count+"\">红一位分布</td>").insertAfter(
".red_one_fenxi");
$(".dongtai:gt(\"" + DmaxNum + "\")").remove();
$(".dongtai:lt(\"" + DminNum + "\")").remove();
for ( var i = 0; i < count; i++) {
$("<td class=\"dongtai_red_one\"></td>").insertAfter(
".dongtai_fenxi"); }
});
</script> <style type="text/css">
body table {
border: 1px solid #666666;
text-align: center;
font-size: 14px;
} body table tr,td {
border: 1px solid #666666;
} .issue {
width: 65px;
} .one {
width: 17px;
height: 17px;
background-color: #FF7F00
} .red,.red_one,.red_one_fenxi,.dongtai_fenxi {
width: 17px;
height: 17px;
background-color: #D40000
} .dongtai_red_one {
width: 17px;
height: 17px;
} .blue {
width: 17px;
height: 17px;
background-color: #2A1FAA
} .jiou,.weishu,.zhenfu {
width: 17px;
height: 17px;
background-color: #FF7F00
} .shengjiang {
width: 17px;
height: 17px;
background-color: #2A9FFF
} .yushu {
width: 17px;
height: 17px;
background-color: #55DFFF
} .weishu_daxiao {
width: 17px;
height: 17px;
background-color: #FF5FFF
} .weishu_fenbu {
width: 17px;
height: 17px;
background-color: #55DF55
}
</style>
</head> <body>
<br>
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="issue" rowspan="2">期号</td>
<td class="red" colspan="6">红球</td>
<td rowspan="2" class="blue">蓝球</td>
</tr>
<tr>
<td class="red">一</td>
<td class="red">二</td>
<td class="red">三</td>
<td class="red">四</td>
<td class="red">五</td>
<td class="red">六</td> </tr> <c:if test="${not empty bonusList}">
<c:forEach items="${bonusList }" var="a">
<tr>
<td class="issue">${a.issue }</td>
<td class="red_one">${a.order_red_one }</td>
<td class="red">${a.order_red_two }</td>
<td class="red">${a.order_red_three }</td>
<td class="red">${a.order_red_four }</td>
<td class="red">${a.order_red_five }</td>
<td class="red">${a.order_red_six }</td>
<td class="blue">${a.blue }</td>
</tr>
</c:forEach>
</c:if> </table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" bgcolor="#FF7F00" class="red_one_fenxi">一位</td>
<!-- 在此处加入动态的列 -->
<td class="jiou" colspan="2">奇偶</td>
<td class="shengjiang" colspan="2">升降</td>
<td class="yushu" colspan="3">012路</td>
<td class="weishu" rowspan="2">尾数</td>
<td class="weishu_daxiao" colspan="2">大小</td>
<td class="yushu" colspan="3">012路</td>
<td class="weishu_fenbu" colspan="10">尾数分布</td>
<td class="zhenfu" rowspan="2">振幅</td>
<td class="shengjiang" colspan="2">升降</td>
<td class="yushu" colspan="3">012路</td>
</tr>
<tr>
<td class="dongtai">01</td>
<td class="dongtai">02</td>
<td class="dongtai">03</td>
<td class="dongtai">04</td>
<td class="dongtai">05</td>
<td class="dongtai">06</td>
<td class="dongtai">07</td>
<td class="dongtai">08</td>
<td class="dongtai">09</td>
<td class="dongtai">10</td>
<td class="dongtai">11</td>
<td class="dongtai">12</td>
<td class="dongtai">13</td>
<td class="dongtai">14</td>
<td class="dongtai">15</td>
<td class="dongtai">16</td>
<td class="dongtai">17</td>
<td class="dongtai">18</td>
<td class="dongtai">19</td>
<td class="dongtai">20</td>
<td class="dongtai">21</td>
<td class="dongtai">22</td>
<td class="dongtai">23</td>
<td class="dongtai">24</td>
<td class="dongtai">25</td>
<td class="dongtai">26</td>
<td class="dongtai">27</td>
<td class="dongtai">28</td>
<td class="dongtai">29</td>
<td class="dongtai">30</td>
<td class="dongtai">31</td>
<td class="dongtai">32</td>
<td class="dongtai">33</td>
<td class="jiou">奇</td>
<td class="jiou">偶</td>
<td class="shengjiang">升</td>
<td class="shengjiang">降</td>
<td class="yushu">0</td>
<td class="yushu">1</td>
<td class="yushu">2</td>
<td class="weishu_daxiao">大</td>
<td class="weishu_daxiao">小</td>
<td class="yushu">0</td>
<td class="yushu">1</td>
<td class="yushu">2</td>
<td class="weishu_fenbu">0</td>
<td class="weishu_fenbu">1</td>
<td class="weishu_fenbu">2</td>
<td class="weishu_fenbu">3</td>
<td class="weishu_fenbu">4</td>
<td class="weishu_fenbu">5</td>
<td class="weishu_fenbu">6</td>
<td class="weishu_fenbu">7</td>
<td class="weishu_fenbu">8</td>
<td class="weishu_fenbu">9</td>
<td class="shengjiang">升</td>
<td class="shengjiang">降</td>
<td class="yushu">0</td>
<td class="yushu">1</td>
<td class="yushu">2</td>
</tr>
<c:if test="${not empty bonusList}">
<c:forEach items="${bonusList }" var="a">
<tr>
<td bgcolor="#FF7F00" class="dongtai_fenxi">${a.order_red_one }</td>
<td class="jiou"> </td>
<td class="jiou"> </td>
<td class="shengjiang"> </td>
<td class="shengjiang"> </td>
<td class="yushu"> </td>
<td class="yushu"> </td>
<td class="yushu"> </td>
<td class="weishu"> </td>
<td class="weishu_daxiao"> </td>
<td class="weishu_daxiao"> </td>
<td class="yushu"> </td>
<td class="yushu"> </td>
<td class="yushu"> </td> <td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="zhenfu"> </td>
<td class="shengjiang"> </td>
<td class="shengjiang"> </td>
<td class="yushu"> </td>
<td class="yushu"> </td>
<td class="yushu"> </td>
</tr>
</c:forEach>
</c:if>
</table>
</td>
</tr>
</table> <table border="1px" bordercolor="#000000" align="center" cellspacing="0px" style="border-collapse:collapse;font-size: 14px;width: 1000px;">
<c:if test="${empty bonusList}">
<tr bgcolor="#f0000f" align="center">
<td>没有数据</td>
</tr>
</c:if>
</table>
<br>
</body>
</html>
使用JQuery，动态增加列的更多相关文章
- WPF datagrid 动态增加列
DataGrid动态增加列 <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.m ...
- jquery动态增加或删除tr和td【实际项目】
难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每 ...
- jquery 动态增加删除行
最近写程序,碰巧有动态增加删除行,下面就记录一下 html就不写了,也没有什么,直接上核心了 新增行 function addRow(obj){ //获得table一共有多少行,方便追加的时候给序号赋 ...
- jquery 动态增加的html元素，初始化设置在id或class上的事件无效
一般情况,我们会在页面初始化完成后对class定义一些全局事件,举个栗子: $(document).ready(function(){ $(".class").on("m ...
- 解决jquery动态增加元素后children值没有变的问题
html代码如下: <ul id="attr_input_panel"> <li> <div class="attr_input_item& ...
- jquery 动态增加table行，动态删除table行
在html中我们大量的用到了局部刷新,局部刷新就是使用js来动态的修改html局部的数据.下面来介绍下使用jquery来动态的增加table的行,当然这种方式可以适用到任何的html组件中去. < ...
- jqGrid动态增加列，使用在根据条件筛选而出现不同的列的场景
function GetGrid2() { var jqdata = [ { Encode:"20180100", FullName: "BYD", SpecT ...
- Vue+elementui 实现复杂表头和动态增加列的二维表格
先上完成的效果图:列是根据查询结果增加的 数据格式: 表头的数据取出: data.data.forEach(element => { this.thead.push({ 品名: element. ...
- JQuery动态增加删除元素
<form action="" method="post" enctype="multipart/form-data"> < ...
随机推荐
- java心跳发送
java心跳发送: 大家都知道.如果你在互联网公司,并且开发的是产品那你一定接触不到.心跳机制.心跳包 那什么是心跳机制呢? 心跳机制就是定时发送一个自定义的结构体(心跳包).确保连接的有效的机制. ...
- Lumen开发：lumen源码解读之初始化(4)——服务提供(ServiceProviders)与路由(Routes)
版权声明:本文为博主原创文章,未经博主允许不得转载. 前面讲了singleton和Middleware,现在来继续讲ServiceProviders和Routes,还是看起始文件bootstrap/a ...
- scp命令需要指定端口时要紧跟在scp后
问题来源:我本地是Ubuntu操作系统,有时需要更新一些文件到服务器.但是,为了安全起见我们都是将服务器的sshd端口修改的,通常不使用默认的22号端口. 如果我们使用scp命令时:scp upl ...
- 【BZOJ3510】首都 LCT维护子树信息+启发式合并
[BZOJ3510]首都 Description 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打 ...
- 九度OJ 1001：A+B for Matrices
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:17682 解决:7079 题目描述: This time, you are supposed to find A+B where A and ...
- Ubuntu 下安装JDK1.8
好困,不行了,我要睡觉了,先上图吧!
- 3.写一个hello world页面
经过1和2的学习,现在已经可以正常启动Django了,这一节说怎么写一个hello world页面,所有的环境基础就是1和2中搭建的 1.在app模块中添加页面 具体为 hello_django\he ...
- 程序运行之ELF 符号表
当一个工程中有多个文件的时候,链接的本质就是要把多个不同的目标文件相互粘到一起.就想玩具积木一样整合成一个整体.为了使不同的目标文件之间能够相互粘合,这些目标文件之间必须要有固定的规则才行.比如目标文 ...
- web audio living
总结网页音频直播的方案和遇到的问题. 代码:(github,待整理) 结果: 使用opus音频编码,web audio api 播放,可以达到100ms以内延时,高质量,低流量的音频直播. 背景: V ...
- 小程序坑 redirectTo 计时器 setInterval clearInterval
var time = 20: var timer = setInterval(function () { time = time - 1; that.setData({ CountDown: time ...