这也是我在自己学做网站时无意搞出来的，希望可以对别人有所启发

  1.  <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2.  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  3.  <%
  4.      String path = request.getContextPath();
  5.      String basePath = request.getScheme() + "://"
  6.              + request.getServerName() + ":" + request.getServerPort()
  7.              + path + "/";
  8.  %>
  9.  
  10.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  11.  <html>
  12.  <head>
  13.  <base href="<%=basePath%>">
  14.  
  15.  <title>My JSP 'table.jsp' starting page</title>
  16.  
  17.  <meta http-equiv="pragma" content="no-cache">
  18.  <meta http-equiv="cache-control" content="no-cache">
  19.  <meta http-equiv="expires" content="0">
  20.  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  21.  <meta http-equiv="description" content="This is my page">
  22.  <!--
  23.      <link rel="stylesheet" type="text/css" href="styles.css">
  24.      -->
  25.  <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
  26.  <script type="text/javascript">
  27.      $(document).ready(
  28.              function() {
  29.                  var maxNum = 0;
  30.                  var minNum = parseInt($(".red_one", this).eq(0).html());
  31.                  $(".red_one", this).each(function() {
  32.                      var num = parseInt(this.innerHTML);
  33.                      if (num > maxNum) {
  34.                          maxNum = num;
  35.                      }
  36.                      if (num < minNum) {
  37.                          minNum = num;
  38.                      }
  39.                  });
  40.                  var DminNum = (minNum - 1);
  41.                  var DmaxNum = (maxNum - 1);
  42.                  var count = (maxNum - minNum) + 1;
  43.                  $("<td colspan=\""+count+"\">红一位分布</td>").insertAfter(
  44.                          ".red_one_fenxi");
  45.                  $(".dongtai:gt(\"" + DmaxNum + "\")").remove();
  46.                  $(".dongtai:lt(\"" + DminNum + "\")").remove();
  47.                  for ( var i = 0; i < count; i++) {
  48.                      $("<td class=\"dongtai_red_one\"></td>").insertAfter(
  49.                              ".dongtai_fenxi");
  50.  
  51.                  }
  52.              });
  53.  </script>
  54.  
  55.  <style type="text/css">
  56.  body table {
  57.      border: 1px solid #666666;
  58.      text-align: center;
  59.      font-size: 14px;
  60.  }
  61.  
  62.  body table tr,td {
  63.      border: 1px solid #666666;
  64.  }
  65.  
  66.  .issue {
  67.      width: 65px;
  68.  }
  69.  
  70.  .one {
  71.      width: 17px;
  72.      height: 17px;
  73.      background-color: #FF7F00
  74.  }
  75.  
  76.  .red,.red_one,.red_one_fenxi,.dongtai_fenxi {
  77.      width: 17px;
  78.      height: 17px;
  79.      background-color: #D40000
  80.  }
  81.  
  82.  .dongtai_red_one {
  83.      width: 17px;
  84.      height: 17px;
  85.  }
  86.  
  87.  .blue {
  88.      width: 17px;
  89.      height: 17px;
  90.      background-color: #2A1FAA
  91.  }
  92.  
  93.  .jiou,.weishu,.zhenfu {
  94.      width: 17px;
  95.      height: 17px;
  96.      background-color: #FF7F00
  97.  }
  98.  
  99.  .shengjiang {
  100.      width: 17px;
  101.      height: 17px;
  102.      background-color: #2A9FFF
  103.  }
  104.  
  105.  .yushu {
  106.      width: 17px;
  107.      height: 17px;
  108.      background-color: #55DFFF
  109.  }
  110.  
  111.  .weishu_daxiao {
  112.      width: 17px;
  113.      height: 17px;
  114.      background-color: #FF5FFF
  115.  }
  116.  
  117.  .weishu_fenbu {
  118.      width: 17px;
  119.      height: 17px;
  120.      background-color: #55DF55
  121.  }
  122.  </style>
  123.  </head>
  124.  
  125.  <body>
  126.      <br>
  127.      <table border="0" cellspacing="0" cellpadding="0" align="center">
  128.          <tr>
  129.              <td>
  130.                  <table border="1" cellspacing="0" cellpadding="0">
  131.                      <tr>
  132.                          <td class="issue" rowspan="2">期号</td>
  133.                          <td class="red" colspan="6">红球</td>
  134.                          <td rowspan="2" class="blue">蓝球</td>
  135.                      </tr>
  136.                      <tr>
  137.                          <td class="red">一</td>
  138.                          <td class="red">二</td>
  139.                          <td class="red">三</td>
  140.                          <td class="red">四</td>
  141.                          <td class="red">五</td>
  142.                          <td class="red">六</td>
  143.  
  144.                      </tr>
  145.  
  146.                      <c:if test="${not empty bonusList}">
  147.                          <c:forEach items="${bonusList }" var="a">
  148.                              <tr>
  149.                                  <td class="issue">${a.issue }</td>
  150.                                  <td class="red_one">${a.order_red_one }</td>
  151.                                  <td class="red">${a.order_red_two }</td>
  152.                                  <td class="red">${a.order_red_three }</td>
  153.                                  <td class="red">${a.order_red_four }</td>
  154.                                  <td class="red">${a.order_red_five }</td>
  155.                                  <td class="red">${a.order_red_six }</td>
  156.                                  <td class="blue">${a.blue }</td>
  157.                              </tr>
  158.                          </c:forEach>
  159.                      </c:if>
  160.  
  161.                  </table>
  162.              </td>
  163.              <td>
  164.                  <table border="1" cellspacing="0" cellpadding="0">
  165.                      <tr>
  166.                          <td rowspan="2" bgcolor="#FF7F00" class="red_one_fenxi">一位</td>
  167.                          <!-- 在此处加入动态的列 -->
  168.                          <td class="jiou" colspan="2">奇偶</td>
  169.                          <td class="shengjiang" colspan="2">升降</td>
  170.                          <td class="yushu" colspan="3">012路</td>
  171.                          <td class="weishu" rowspan="2">尾数</td>
  172.                          <td class="weishu_daxiao" colspan="2">大小</td>
  173.                          <td class="yushu" colspan="3">012路</td>
  174.                          <td class="weishu_fenbu" colspan="10">尾数分布</td>
  175.                          <td class="zhenfu" rowspan="2">振幅</td>
  176.                          <td class="shengjiang" colspan="2">升降</td>
  177.                          <td class="yushu" colspan="3">012路</td>
  178.                      </tr>
  179.                      <tr>
  180.                          <td class="dongtai">01</td>
  181.                          <td class="dongtai">02</td>
  182.                          <td class="dongtai">03</td>
  183.                          <td class="dongtai">04</td>
  184.                          <td class="dongtai">05</td>
  185.                          <td class="dongtai">06</td>
  186.                          <td class="dongtai">07</td>
  187.                          <td class="dongtai">08</td>
  188.                          <td class="dongtai">09</td>
  189.                          <td class="dongtai">10</td>
  190.                          <td class="dongtai">11</td>
  191.                          <td class="dongtai">12</td>
  192.                          <td class="dongtai">13</td>
  193.                          <td class="dongtai">14</td>
  194.                          <td class="dongtai">15</td>
  195.                          <td class="dongtai">16</td>
  196.                          <td class="dongtai">17</td>
  197.                          <td class="dongtai">18</td>
  198.                          <td class="dongtai">19</td>
  199.                          <td class="dongtai">20</td>
  200.                          <td class="dongtai">21</td>
  201.                          <td class="dongtai">22</td>
  202.                          <td class="dongtai">23</td>
  203.                          <td class="dongtai">24</td>
  204.                          <td class="dongtai">25</td>
  205.                          <td class="dongtai">26</td>
  206.                          <td class="dongtai">27</td>
  207.                          <td class="dongtai">28</td>
  208.                          <td class="dongtai">29</td>
  209.                          <td class="dongtai">30</td>
  210.                          <td class="dongtai">31</td>
  211.                          <td class="dongtai">32</td>
  212.                          <td class="dongtai">33</td>
  213.                          <td class="jiou">奇</td>
  214.                          <td class="jiou">偶</td>
  215.                          <td class="shengjiang">升</td>
  216.                          <td class="shengjiang">降</td>
  217.                          <td class="yushu">0</td>
  218.                          <td class="yushu">1</td>
  219.                          <td class="yushu">2</td>
  220.                          <td class="weishu_daxiao">大</td>
  221.                          <td class="weishu_daxiao">小</td>
  222.                          <td class="yushu">0</td>
  223.                          <td class="yushu">1</td>
  224.                          <td class="yushu">2</td>
  225.                          <td class="weishu_fenbu">0</td>
  226.                          <td class="weishu_fenbu">1</td>
  227.                          <td class="weishu_fenbu">2</td>
  228.                          <td class="weishu_fenbu">3</td>
  229.                          <td class="weishu_fenbu">4</td>
  230.                          <td class="weishu_fenbu">5</td>
  231.                          <td class="weishu_fenbu">6</td>
  232.                          <td class="weishu_fenbu">7</td>
  233.                          <td class="weishu_fenbu">8</td>
  234.                          <td class="weishu_fenbu">9</td>
  235.                          <td class="shengjiang">升</td>
  236.                          <td class="shengjiang">降</td>
  237.                          <td class="yushu">0</td>
  238.                          <td class="yushu">1</td>
  239.                          <td class="yushu">2</td>
  240.                      </tr>
  241.                      <c:if test="${not empty bonusList}">
  242.                          <c:forEach items="${bonusList }" var="a">
  243.                              <tr>
  244.                                  <td bgcolor="#FF7F00" class="dongtai_fenxi">${a.order_red_one }</td>
  245.                                  <td class="jiou">&nbsp;</td>
  246.                                  <td class="jiou">&nbsp;</td>
  247.                                  <td class="shengjiang">&nbsp;</td>
  248.                                  <td class="shengjiang">&nbsp;</td>
  249.                                  <td class="yushu">&nbsp;</td>
  250.                                  <td class="yushu">&nbsp;</td>
  251.                                  <td class="yushu">&nbsp;</td>
  252.                                  <td class="weishu">&nbsp;</td>
  253.                                  <td class="weishu_daxiao">&nbsp;</td>
  254.                                  <td class="weishu_daxiao">&nbsp;</td>
  255.                                  <td class="yushu">&nbsp;</td>
  256.                                  <td class="yushu">&nbsp;</td>
  257.                                  <td class="yushu">&nbsp;</td>
  258.  
  259.                                  <td class="weishu_fenbu">&nbsp;</td>
  260.                                  <td class="weishu_fenbu">&nbsp;</td>
  261.                                  <td class="weishu_fenbu">&nbsp;</td>
  262.                                  <td class="weishu_fenbu">&nbsp;</td>
  263.                                  <td class="weishu_fenbu">&nbsp;</td>
  264.                                  <td class="weishu_fenbu">&nbsp;</td>
  265.                                  <td class="weishu_fenbu">&nbsp;</td>
  266.                                  <td class="weishu_fenbu">&nbsp;</td>
  267.                                  <td class="weishu_fenbu">&nbsp;</td>
  268.                                  <td class="weishu_fenbu">&nbsp;</td>
  269.                                  <td class="zhenfu">&nbsp;</td>
  270.                                  <td class="shengjiang">&nbsp;</td>
  271.                                  <td class="shengjiang">&nbsp;</td>
  272.                                  <td class="yushu">&nbsp;</td>
  273.                                  <td class="yushu">&nbsp;</td>
  274.                                  <td class="yushu">&nbsp;</td>
  275.                              </tr>
  276.                          </c:forEach>
  277.                      </c:if>
  278.                  </table>
  279.              </td>
  280.          </tr>
  281.      </table>
  282.  
  283.      <table border="1px" bordercolor="#000000" align="center" cellspacing="0px" style="border-collapse:collapse;font-size: 14px;width: 1000px;">
  284.          <c:if test="${empty bonusList}">
  285.              <tr bgcolor="#f0000f" align="center">
  286.                  <td>没有数据</td>
  287.              </tr>
  288.          </c:if>
  289.      </table>
  290.      <br>
  291.  </body>
  292.  </html>

使用JQuery，动态增加列的更多相关文章

  1. WPF datagrid 动态增加列

    DataGrid动态增加列 <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.m ...

  2. jquery动态增加或删除tr和td【实际项目】

    难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每 ...

  3. jquery 动态增加删除行

    最近写程序,碰巧有动态增加删除行,下面就记录一下 html就不写了,也没有什么,直接上核心了 新增行 function addRow(obj){ //获得table一共有多少行,方便追加的时候给序号赋 ...

  4. jquery 动态增加的html元素，初始化设置在id或class上的事件无效

    一般情况,我们会在页面初始化完成后对class定义一些全局事件,举个栗子: $(document).ready(function(){ $(".class").on("m ...

  5. 解决jquery动态增加元素后children值没有变的问题

    html代码如下: <ul id="attr_input_panel"> <li> <div class="attr_input_item& ...

  6. jquery 动态增加table行，动态删除table行

    在html中我们大量的用到了局部刷新,局部刷新就是使用js来动态的修改html局部的数据.下面来介绍下使用jquery来动态的增加table的行,当然这种方式可以适用到任何的html组件中去. < ...

  7. jqGrid动态增加列，使用在根据条件筛选而出现不同的列的场景

    function GetGrid2() { var jqdata = [ { Encode:"20180100", FullName: "BYD", SpecT ...

  8. Vue+elementui 实现复杂表头和动态增加列的二维表格

    先上完成的效果图:列是根据查询结果增加的 数据格式: 表头的数据取出: data.data.forEach(element => { this.thead.push({ 品名: element. ...

  9. JQuery动态增加删除元素

    <form action="" method="post" enctype="multipart/form-data"> < ...

随机推荐

  1. JSP的优势

    以下列出了使用JSP带来的其他好处: 与ASP相比:JSP有两大优势.首先,动态部分用Java编写,而不是VB或其他MS专用语言,所以更加强大与易用.第二点就是JSP易于移植到非MS平台上. 与纯 S ...

  2. Yaml 的python 应用

    1.安装yaml的python包 2.准备yaml的数据 3.yaml.load 解析yaml 3.生产yaml

  3. 多媒体开发之--- h264 图像、帧、片、NALU

    图像.帧.片.NALU 是学习 H.264的人常常感到困惑的一些概念,我在这里对自己的理解做一些阐述,欢迎大家讨论: H.264 是一次概念的革新,它打破常规,完全没有 I 帧.P帧.B 帧的概念,也 ...

  4. android webview 加载本地html 实现 与 java 之间的相互响应

    1.布局 <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:androi ...

  5. WebView 显示网页

    1.布局 <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:androi ...

  6. Android JNI开发之NDK环境搭建

    参考:http://www.cnblogs.com/yejiurui/p/3476565.html 谷歌改良了ndk的开发流程,对于Windows环境下NDK的开发,如果使用的NDK是r7之前的版本, ...

  7. python 可变参数函数定义* args和**kwargs的用法

    python函数可变参数 (Variable Argument) 的方法:使用*args和**kwargs语法.其中,*args是可变的positional arguments列表,**kwargs是 ...

  8. [转载]Hibernate如何提升数据库查询的性能

    目录(?)[-] 数据库查询性能的提升也是涉及到开发中的各个阶段在开发中选用正确的查询方法无疑是最基础也最简单的 SQL语句的优化 使用正确的查询方法 使用正确的抓取策略 Hibernate的性能优化 ...

  9. MD5加密“破解”在.NET平台实现最基本的理解

    MD5作为一种散列算法,广泛用于密码传输过程中的“加密”(引号的意思是这并不是真正的加密,而是形成密码的散列值)过程.MD顾名思义Message Digest(报文摘要),可以将输入的密码,一般来说为 ...

  10. JS饼状图表数据分布插件

    在线演示 本地下载