合并table中值相同的列

Posted 2020-10-23 ZPH

<script type="text/javascript">
window.onload=function(){
var listTable = document.getElementById("listTable"); //根据table表格id获得要合并的表格
var trs = listTable.getElementsByTagName("tr"); 
if (trs.length > 1) {
   for (var i = 1; i < trs.length - 1; i++) {
       var v1 = trs[i].getElementsByTagName("td")[2].innerhtml; //2：为表格中要合并的td的位置
       var cnt = 1;
       for (var j = i + 1; j < trs.length - 1; j++) {
           var v2 = trs[j].getElementsByTagName("td")[2].innerHTML;
           if (v1 == v2) {
               trs[j].getElementsByTagName("td")[2].style.display = "none";
               cnt++;
           } else {
               break;
           }
       }
       if (cnt > 1) {
           trs[i].getElementsByTagName("td")[2].rowSpan = cnt;
           i = i + cnt - 1;
       }
   }
}
}
</script>




<table id="listTable" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr> 
            <td  class="table1_title1"  width="1%">复选框</td>
            <td class="table1_title1" width="6%">序号</td>
            <td class="table1_title1" width="15%" >日期</td>   //（合并行）
            <td class="table1_title1" width="10%">时间</td>
            <td class="table1_title1" width="30%">内容</td>
            <td class="table1_title1" width="15%">学习时长（分）</td>
        </tr>
<logic:iterate id="item" name="CourLearnForm" property="item" >
<tr> 
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
</logic:iterate>
</table>