使用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"> < ...
随机推荐
- Hugo hexo 搭建博客系列1：自己的服务器
hexo jekyll https://hexo.io/zh-cn/ http://theme-next.iissnan.com/getting-started.html Hexo 是高效的静态站点生 ...
- Disruptor 创建过程
1 Disruptor disruptor = new Disruptor<ValueEvent>(ValueEvent.EVENT_FACTORY, ringBufferSize, ex ...
- atom常用插件安装
安装插件方法: File -Settings -Install 在搜索框里搜索你想要的插件,出来之后 点击install ,下图以 linter-selint 为例 ATOM常用插件推荐 simpli ...
- vue构建完整项目-以及实现
简介 由于开发vue项目的时候,需要重新搭建项目的架子,比较麻烦,其实之前做过的项目好多都可以直接拿过来用,比如接下来的这个项目,就可以满足平常的vue单页面开发. 该项目包括了: 全局配置axios ...
- CF#256(Div.2) A. Rewards
A. Rewards time limit per test 1 second memory limit per test 256 megabytes input standard input out ...
- 1. lvs+keepalived 高可用群集
一. keepalived 工具介绍 1.专为lvs 和HA 设计的一款健康检查工具 2.支持故障自动切换 3.支持节点健康状态检查 二. keepalived 实现原理剖析 keepalived ...
- php 写入数据库时Call to a member function bind_param() on a non-object
<?php $servername = "localhost"; $username = "username"; $password = "pa ...
- java.util包下面的类---------01---示意图
一直在使用util包下面的这些类,甚至有些没用过的,想要都去认识认识他们!也许在未来的一天可以用到! 图太大不好截图!部分没有截全!
- php, tp5, 选中导航菜单
1. 首先定义一个函数: function nav_select($navindex){ $nav_arr = [ 1 => ['index',], 2 => ['mei',], 3 =& ...
- 【python】-- Socket接收大数据
Socket接收大数据 上一篇博客中的简单ssh实例,就是说当服务器发送至客户端的数据,大于客户端设置的数据,则就会把数据服务端发过来的数据剩余数据存在IO缓冲区中,这样就会造成我们想要获取数据的完整 ...