【Javascript】动态合并table单元格

╰半橙微兮° 2022-08-22 03:47 334阅读 0赞

废话不说直接上代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
  5. <title>无标题文档 </title> 
  6. </head> 
  8. <body> 
  9. <table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab"> 
  10.   <tr height="48">
  11.     <td height="48" width="72">选择</td>
  12.     <td width="72">积分表编号</td>
  13.     <td width="72">应用对象</td>
  14.     <td width="72">所属线条</td>
  15.     <td width="72">事件分类</td>
  16.     <td width="72">事件等次</td>
  17.     <td width="68">事件积分</td>
  18.     <td width="135">评分说明</td>
  19.     <td width="72">发文依据</td>
  20.     <td width="72">条款编号（非必填）</td>
  21.     <td width="40">备注</td>
  22.   </tr>
  23.   <tr height="50">
  24.     <td height="50">　</td>
  25.     <td>JF0001</td>
  26.     <td width="72">业务外包人员</td>
  27.     <td width="72">市场线</td>
  28.     <td width="72">良好事件</td>
  29.     <td width="72">诚信记录</td>
  30.     <td>10</td>
  31.     <td width="135">(一)    在维护或客户服务过程中，擅自修改用户数据或局数据的行为，每次扣从业资格积分10分。</td>
  32.     <td width="72">xx分公司网运线维护外包从业人员积分管理规定</td>
  33.     <td width="72">xx分公司网运线维护外包从业人员积分管理规定分公司网运线维护外包从业人员积分管理规定<br />
  34.       第三条 、第七条</td>
  35.     <td>　</td>
  36.   </tr>
  37.   <tr height="32">
  38.     <td height="32">　</td>
  39.     <td>JF0002</td>
  40.     <td width="72">业务外包人员</td>
  41.     <td width="72">市场线</td>
  42.     <td width="72">良好事件</td>
  43.     <td width="72">诚信记录</td>
  44.     <td width="68">　</td>
  45.     <td width="135">　</td>
  46.     <td width="72">　</td>
  47.     <td width="72">　</td>
  48.     <td>　</td>
  49.   </tr>
  50.   <tr height="32">
  51.     <td height="32">　</td>
  52.     <td>JF0003</td>
  53.     <td width="72">业务外包人员</td>
  54.     <td width="72">市场线</td>
  55.     <td width="72">良好事件</td>
  56.     <td width="72">诚信记录</td>
  57.     <td width="68">　</td>
  58.     <td width="135">　</td>
  59.     <td width="72">　</td>
  60.     <td width="72">　</td>
  61.     <td>　</td>
  62.   </tr>
  63.   <tr height="32">
  64.     <td height="32">　</td>
  65.     <td>JF0004</td>
  66.     <td width="72">业务外包人员</td>
  67.     <td width="72">市场线</td>
  68.     <td width="72">良好事件</td>
  69.     <td width="72">诚信记录</td>
  70.     <td width="68">　</td>
  71.     <td width="135">　</td>
  72.     <td width="72">　</td>
  73.     <td width="72">　</td>
  74.     <td>　</td>
  75.   </tr>
  76.   <tr height="32">
  77.     <td height="32">　</td>
  78.     <td>JF0005</td>
  79.     <td width="72">业务外包人员</td>
  80.     <td width="72">市场线</td>
  81.     <td width="72">不良事件</td>
  82.     <td width="72">黑名单记录</td>
  83.     <td width="68">　</td>
  84.     <td width="135">　</td>
  85.     <td width="72">　</td>
  86.     <td width="72">　</td>
  87.     <td>　</td>
  88.   </tr>
  89.   <tr height="32">
  90.     <td height="32">　</td>
  91.     <td>JF0006</td>
  92.     <td width="72">业务外包人员</td>
  93.     <td width="72">市场线</td>
  94.     <td width="72">不良事件</td>
  95.     <td width="72">黑名单记录</td>
  96.     <td width="68">　</td>
  97.     <td width="135">　</td>
  98.     <td width="72">　</td>
  99.     <td width="72">　</td>
  100.     <td>　</td>
  101.   </tr>
  102.   <tr height="32">
  103.     <td height="32">　</td>
  104.     <td>JF0007</td>
  105.     <td width="72">业务外包人员</td>
  106.     <td width="72">市场线</td>
  107.     <td width="72">不良事件</td>
  108.     <td width="72">诚信记录</td>
  109.     <td>　</td>
  110.     <td width="135">　</td>
  111.     <td width="72">　</td>
  112.     <td>　</td>
  113.     <td>　</td>
  114.   </tr>
  115.   <tr height="32">
  116.     <td height="32">　</td>
  117.     <td>JF0008</td>
  118.     <td width="72">业务外包人员</td>
  119.     <td width="72">市场线</td>
  120.     <td width="72">不良事件</td>
  121.     <td width="72">诚信记录</td>
  122.     <td>　</td>
  123.     <td width="135">　</td>
  124.     <td width="72">　</td>
  125.     <td>　</td>
  126.     <td>　</td>
  127.   </tr>
  128.   <tr height="32">
  129.     <td height="32">　</td>
  130.     <td>JF0009</td>
  131.     <td width="72">业务外包人员</td>
  132.     <td width="72">网运线</td>
  133.     <td width="72">良好事件</td>
  134.     <td width="72">诚信记录</td>
  135.     <td width="68">　</td>
  136.     <td width="135">　</td>
  137.     <td width="72">　</td>
  138.     <td width="72">　</td>
  139.     <td width="40">　</td>
  140.   </tr>
  141.   <tr height="32">
  142.     <td height="32">　</td>
  143.     <td>JF0010</td>
  144.     <td width="72">业务外包人员</td>
  145.     <td width="72">网运线</td>
  146.     <td width="72">良好事件</td>
  147.     <td width="72">诚信记录</td>
  148.     <td width="68">　</td>
  149.     <td width="135">　</td>
  150.     <td width="72">　</td>
  151.     <td width="72">　</td>
  152.     <td width="40">　</td>
  153.   </tr>
  154.   <tr height="32">
  155.     <td height="32">　</td>
  156.     <td>JF0011</td>
  157.     <td width="72">业务外包人员</td>
  158.     <td width="72">网运线</td>
  159.     <td width="72">良好事件</td>
  160.     <td width="72">诚信记录</td>
  161.     <td width="68">　</td>
  162.     <td width="135">　</td>
  163.     <td width="72">　</td>
  164.     <td width="72">　</td>
  165.     <td width="40">　</td>
  166.   </tr>
  167.   <tr height="32">
  168.     <td height="32">　</td>
  169.     <td>JF0012</td>
  170.     <td width="72">业务外包人员</td>
  171.     <td width="72">网运线</td>
  172.     <td>不良事件</td>
  173.     <td width="72">黑名单记录</td>
  174.     <td>　</td>
  175.     <td width="135">　</td>
  176.     <td width="72">　</td>
  177.     <td width="72">　</td>
  178.     <td width="40">　</td>
  179.   </tr>
  180.   <tr height="32">
  181.     <td height="32">　</td>
  182.     <td>JF0013</td>
  183.     <td width="72">业务外包人员</td>
  184.     <td width="72">网运线</td>
  185.     <td>不良事件</td>
  186.     <td width="72">诚信记录</td>
  187.     <td width="68">　</td>
  188.     <td width="135">　</td>
  189.     <td width="72">　</td>
  190.     <td width="72">　</td>
  191.     <td width="40">　</td>
  192.   </tr>
  193.   <tr height="18">
  194.     <td height="18">　</td>
  195.     <td>JF0014</td>
  196.     <td width="72">业务外包商</td>
  197.     <td width="72">市场线</td>
  198.     <td width="72">良好事件</td>
  199.     <td width="72">诚信记录</td>
  200.     <td width="68">　</td>
  201.     <td width="135">待定</td>
  202.     <td width="72">　</td>
  203.     <td width="72">待定</td>
  204.     <td>　</td>
  205.   </tr>
  206.   <tr height="18">
  207.     <td height="18">　</td>
  208.     <td>JF0015</td>
  209.     <td width="72">业务外包商</td>
  210.     <td width="72">市场线</td>
  211.     <td width="72">良好事件</td>
  212.     <td width="72">诚信记录</td>
  213.     <td width="68">　</td>
  214.     <td width="135">　</td>
  215.     <td width="72">　</td>
  216.     <td width="72">　</td>
  217.     <td>　</td>
  218.   </tr>
  219.   <tr height="18">
  220.     <td height="18">　</td>
  221.     <td>JF0016</td>
  222.     <td width="72">业务外包商</td>
  223.     <td width="72">市场线</td>
  224.     <td width="72">良好事件</td>
  225.     <td width="72">诚信记录</td>
  226.     <td width="68">　</td>
  227.     <td width="135">　</td>
  228.     <td width="72">　</td>
  229.     <td width="72">　</td>
  230.     <td>　</td>
  231.   </tr>
  232.   <tr height="18">
  233.     <td height="18">　</td>
  234.     <td>JF0017</td>
  235.     <td width="72">业务外包商</td>
  236.     <td width="72">市场线</td>
  237.     <td width="72">良好事件</td>
  238.     <td width="72">诚信记录</td>
  239.     <td width="68">　</td>
  240.     <td width="135">　</td>
  241.     <td width="72">　</td>
  242.     <td width="72">　</td>
  243.     <td>　</td>
  244.   </tr>
  245.   <tr height="18">
  246.     <td height="18">　</td>
  247.     <td>JF0018</td>
  248.     <td width="72">业务外包商</td>
  249.     <td width="72">市场线</td>
  250.     <td width="72">不良事件</td>
  251.     <td width="72">黑名单记录</td>
  252.     <td width="68">　</td>
  253.     <td width="135">　</td>
  254.     <td width="72">　</td>
  255.     <td width="72">　</td>
  256.     <td>　</td>
  257.   </tr>
  258.   <tr height="18">
  259.     <td height="18">　</td>
  260.     <td>JF0019</td>
  261.     <td width="72">业务外包商</td>
  262.     <td width="72">市场线</td>
  263.     <td width="72">不良事件</td>
  264.     <td width="72">诚信记录</td>
  265.     <td width="68">　</td>
  266.     <td width="135">　</td>
  267.     <td width="72">　</td>
  268.     <td width="72">　</td>
  269.     <td>　</td>
  270.   </tr>
  271.   <tr height="18">
  272.     <td height="18">　</td>
  273.     <td>JF0020</td>
  274.     <td width="72">业务外包商</td>
  275.     <td width="72">市场线</td>
  276.     <td width="72">不良事件</td>
  277.     <td width="72">诚信记录</td>
  278.     <td width="68">　</td>
  279.     <td width="135">　</td>
  280.     <td width="72">　</td>
  281.     <td width="72">　</td>
  282.     <td>　</td>
  283.   </tr>
  284.   <tr height="18">
  285.     <td height="18">　</td>
  286.     <td>JF0021</td>
  287.     <td width="72">业务外包商</td>
  288.     <td width="72">市场线</td>
  289.     <td width="72">不良事件</td>
  290.     <td width="72">诚信记录</td>
  291.     <td width="68">　</td>
  292.     <td width="135">　</td>
  293.     <td width="72">　</td>
  294.     <td width="72">　</td>
  295.     <td>　</td>
  296.   </tr>
  297.   <tr height="18">
  298.     <td height="18">　</td>
  299.     <td>JF0022</td>
  300.     <td width="72">业务外包商</td>
  301.     <td width="72">网运线</td>
  302.     <td width="72">良好事件</td>
  303.     <td width="72">诚信记录</td>
  304.     <td width="68">　</td>
  305.     <td width="135">待定</td>
  306.     <td width="72">　</td>
  307.     <td width="72">待定</td>
  308.     <td>　</td>
  309.   </tr>
  310.   <tr height="18">
  311.     <td height="18">　</td>
  312.     <td>JF0023</td>
  313.     <td width="72">业务外包商</td>
  314.     <td width="72">网运线</td>
  315.     <td width="72">良好事件</td>
  316.     <td width="72">诚信记录</td>
  317.     <td width="68">　</td>
  318.     <td width="135">　</td>
  319.     <td width="72">　</td>
  320.     <td width="72">　</td>
  321.     <td>　</td>
  322.   </tr>
  323.   <tr height="18">
  324.     <td height="18">　</td>
  325.     <td>JF0024</td>
  326.     <td width="72">业务外包商</td>
  327.     <td width="72">网运线</td>
  328.     <td width="72">良好事件</td>
  329.     <td width="72">诚信记录</td>
  330.     <td width="68">　</td>
  331.     <td width="135">　</td>
  332.     <td width="72">　</td>
  333.     <td width="72">　</td>
  334.     <td>　</td>
  335.   </tr>
  336.   <tr height="18">
  337.     <td height="18">　</td>
  338.     <td>JF0025</td>
  339.     <td width="72">业务外包商</td>
  340.     <td width="72">网运线</td>
  341.     <td width="72">不良事件</td>
  342.     <td width="72">黑名单记录</td>
  343.     <td width="68">　</td>
  344.     <td width="135">待定</td>
  345.     <td width="72">　</td>
  346.     <td width="72">待定</td>
  347.     <td>　</td>
  348.   </tr>
  349.   <tr height="18">
  350.     <td height="18">　</td>
  351.     <td>JF0026</td>
  352.     <td width="72">业务外包商</td>
  353.     <td width="72">网运线</td>
  354.     <td width="72">不良事件</td>
  355.     <td width="72">诚信记录</td>
  356.     <td width="68">　</td>
  357.     <td width="135">　</td>
  358.     <td width="72">　</td>
  359.     <td width="72">　</td>
  360.     <td>　</td>
  361.   </tr>
  362.   <tr height="18">
  363.     <td height="18">　</td>
  364.     <td>JF0027</td>
  365.     <td width="72">业务外包商</td>
  366.     <td width="72">网运线</td>
  367.     <td width="72">不良事件</td>
  368.     <td width="72">诚信记录</td>
  369.     <td width="68">　</td>
  370.     <td width="135">　</td>
  371.     <td width="72">　</td>
  372.     <td width="72">　</td>
  373.     <td>　</td>
  374.   </tr>
  375.   <tr height="18">
  376.     <td height="18">　</td>
  377.     <td>JF0028</td>
  378.     <td width="72">业务外包商</td>
  379.     <td width="72">网运线</td>
  380.     <td width="72">不良事件</td>
  381.     <td width="72">诚信记录</td>
  382.     <td width="68">　</td>
  383.     <td width="135">　</td>
  384.     <td width="72">　</td>
  385.     <td width="72">　</td>
  386.     <td>　</td>
  387.   </tr>
  388. </table> 
  390. <script type="text/javascript">
  391. window.onload = function(){
  392.     var tab = document.getElementById("tab");
  393.     var maxCol = 6, val, count, start;
  395.     for(var col = maxCol-1; col >= 0 ; col--){
  396.         count = 1;
  397.         val = "";
  398.         for(var i=0; i<tab.rows.length; i++){
  399.             if(val == tab.rows[i].cells[col].innerHTML){
  400.                 count++;
  401.             }else{
  402.                 if(count > 1){ //合并
  403.                     start = i - count;
  404.                     tab.rows[start].cells[col].rowSpan = count;
  405.                     for(var j=start+1; j<i; j++){
  406.                         tab.rows[j].cells[col].style.display = "none";
  407.                     }
  408.                     count = 1;
  409.                 }
  410.                 val = tab.rows[i].cells[col].innerHTML;
  411.             }
  412.         }
  413.         if(count > 1 ){ //合并，最后几行相同的情况下
  414.             start = i - count;
  415.             tab.rows[start].cells[col].rowSpan = count;
  416.             for(var j=start+1; j<i; j++){
  417.                 tab.rows[j].cells[col].style.display = "none";
  418.             }
  419.         }
  420.     }
  421. };
  423. </script>
  424. </body> 
  425. </html>

发表评论

表情：
评论列表 （有 0 条评论，334人围观）

还没有评论，来说两句吧...

相关阅读