使用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"> < ...
随机推荐
- erlang 最大公约数
一般面试会遇到问一些算法,什么排序,树,图等等,冷不丁还会问几个蛋疼的问题,我估计生产情况十有八九都用不上,只是题目罢了. 题目:求两个大数的最大公约数. 什么是最大公约数呢? 百度百科的答案这样的: ...
- 动态对象创建（二）重载new和delete
动态对象创建(二)重载new和delete 前言 上文我简单介绍了一下动态对象创建的方法,这一篇文章的内容主要是对重载new和delete做一些讲解,也希望能够得到博友们的指点,在这里谢过大家. 通常 ...
- 也谈在 .NET 平台上使用 Scala 语言(续)
而我是在 Ubuntu 操作系统中使用 Scala.NET 的,应该没有这个问题. 那么,就让我们来測试一下吧. 如今,我们添加一个 DotNet.cs 文件,例如以下所看到的: 1 2 3 4 5 ...
- 读《《图解TCP-IP》》有感
读<<图解TCP/IP>>有感 TCP/IP 近期几天读完<<图解TCP/IP>>,收获蛮多,记得上学时读stevens的<<TCP/IP具 ...
- Android 与H5之间的js交互
之前项目做过一些Android和Html5之间js交互方面的东西,今天有时间就总结一下: 一.为什么要进行js交互: 为了方便原生开发和Html之间数据传递,在静态页面的情况下可以改变原生开发的页面: ...
- Miller-Rabin大素数测试模板
根据费马小定理: 对于素数n,a(0<a<n),a^(n-1)=1(mod n) 如果对于一个<n的正整数a,a^(n-1)!=1(mod n),则n必不是素数. 然后就可以随机生成 ...
- 【BZOJ4820】[Sdoi2017]硬币游戏 AC自动机+概率DP+高斯消元
[BZOJ4820][Sdoi2017]硬币游戏 Description 周末同学们非常无聊,有人提议,咱们扔硬币玩吧,谁扔的硬币正面次数多谁胜利.大家纷纷觉得这个游戏非常符合同学们的特色,但只是扔硬 ...
- python查询IP地址所属地
1.linux命令行版 #!/usr/bin/python #-*- coding: utf-8 -*- import json import urllib import sys def get_da ...
- 通过Safari获取iOS设备的UUID，远程发送更是便捷
1.获取UUID (1)在Safari上输入:http://fir.im/udid (2)点击安装描述文件,然后就可以获取到UUID了 2.fir.im提供一个非常好用的内侧平台 详情使用见:http ...
- Every norm is a convex function
https://ipfs.io/ipfs/QmXoypizjW3WknFiJnKLwHCnL72vedxjQkDDP1mXWo6uco/wiki/Convex_function.html Every ...