使用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"> < ...
随机推荐
- 11 Memcached 缓存雪崩现象
一:Memcached 缓存雪崩现象(1)造成原因:一般是由某个节点失效,导致其他的节点的缓存命中率下降,缓存中缺失的数据查询,短时间内造成的数据库服务器奔溃.重启DB,短期内又被压垮,但缓存的数据增 ...
- Linux守护进程简单介绍和实例具体解释
Linux守护进程简单介绍和实例具体解释 简单介绍 守护进程(Daemon)是执行在后台的一种特殊进程.它独立于控制终端而且周期性地执行某种任务或等待处理某些发生的事件.守护进程是一种非常实用的进程. ...
- 关于iphone自动播放音频和视频问题的解决办法
大家都知道 做移动端 会遇到音频和视频无法自动播放问题(我也遇到了)于是想办法解决这个问题 我只是找到了在微信中解决的办法(如果谁有在别的浏览器有这个办法 请私聊我 )我是没有发现 document ...
- DICOM：C-GET服务
背景: 之前博文对照过多次C-MOVE与C-GET服务的差别,两者最大的差别在于C-GET是基于单个TCP连接的点对点的双方服务.而C-MOVE是基于两个TCP连接的三方服务(详情參见:<DIC ...
- Unity3d NGUI 360度旋转
[AddComponentMenu("NGUI/Examples/Spin With Mouse")] publicclass SpinWithMouse : MonoBehavi ...
- ios开发：如何用js调用ios
本文转载至 :http://blog.chinaunix.net/uid-29415710-id-4058564.html - (BOOL)webView:(UIWebView *)webView s ...
- 【BZOJ4009】[HNOI2015]接水果 DFS序+整体二分+扫描线+树状数组
[BZOJ4009][HNOI2015]接水果 Description 风见幽香非常喜欢玩一个叫做 osu!的游戏,其中她最喜欢玩的模式就是接水果.由于她已经DT FC 了The big black, ...
- 【BZOJ4028】[HEOI2015]公约数数列 分块
[BZOJ4028][HEOI2015]公约数数列 Description 设计一个数据结构. 给定一个正整数数列 a_0, a_1, ..., a_{n - 1},你需要支持以下两种操作: 1. M ...
- 【BZOJ3168】[Heoi2013]钙铁锌硒维生素 高斯消元求矩阵的逆+匈牙利算法
[BZOJ3168][Heoi2013]钙铁锌硒维生素 Description 银河队选手名单出来了!小林,作为特聘的营养师,将负责银河队选手参加宇宙比赛的饮食.众所周知,前往宇宙的某个星球,通常要花 ...
- vue router-link子级返回父级页面
vue-router嵌套路由,从二级路由跳转到一级路由时,间歇性导致一级路由重叠 解决方法: 1.使用this.$router.push跳转