js合并表格内容重复单元格

  js合并表格每一行中内容相同的单元格,效果如下

js合并表格内容重复单元格

  源代码如下

<title>js合并表格内容重复单元格</title>
<table id="tb" border="1">
    <tr><td>1</td><td>xx</td><td>111</td></tr>
    <tr><td>2</td><td>xx</td><td>222</td></tr>
    <tr><td>3</td><td>xx</td><td>333</td></tr>
    <tr><td>4</td><td>xx1</td><td>444</td></tr>
    <tr><td>5</td><td>xx1</td><td>555</td></tr>
    <tr><td>6</td><td>xx2</td><td>xx</td></tr>
</table>
<script>
    var tb = document.getElementById('tb'), rowspan, mergeCellIndex = 1//要合并的单元格下标;
    for (var i = 0; i < tb.rows.length; i++) {
        rowspan = 1;
        for (var j = i + 1; j < tb.rows.length; j++) {//继续找后续行是否有相同的
            if (tb.rows[j].cells[mergeCellIndex].innerHTML == tb.rows[i].cells[mergeCellIndex].innerHTML) {
                rowspan++;
                tb.rows[j].cells[mergeCellIndex].style.display='none'
            }
            else break;
        }
        if (rowspan > 1) tb.rows[i].cells[mergeCellIndex].rowSpan = rowspan;
    }
</script>

 



原创文章,转载请注明出处:js合并表格内容重复单元格
评论(0)Web开发网
阅读(47)喜欢(0)不喜欢(0)JavaScript/Ajax