table表格按照第一列合并相同内容

  table表格按照第一列内容相同进行合并,后续内容相同单元格按照第一列rowspan进行合并,而不是前一列的rowspan,效果如下

table表格按照第一列合并相同内容

  table表格按照第一列合并相同内容源代码如下

<table width="400" border="1">
    <tbody>
        <tr>
            <td>a</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>a</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>2</td>
        </tr>
        <tr>
            <td>a</td>
            <td>1</td>
            <td>3</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>b</td>
            <td>3</td>
            <td>3</td>
            <td>6</td>
            <td>4</td>
        </tr>
        <tr>
            <td>b</td>
            <td>3</td>
            <td>4</td>
            <td>6</td>
            <td>5</td>
        </tr>
        <tr>
            <td>cc</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>cc</td>
            <td>2</td>
            <td>3</td>
            <td>5</td>
            <td>5</td>
        </tr>
    </tbody>
</table><hr />
<table width="400" border="1" id="tb">
    <tbody>
        <tr>
            <td>a</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>a</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>2</td>
        </tr>
        <tr>
            <td>a</td>
            <td>1</td>
            <td>3</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>b</td>
            <td>3</td>
            <td>3</td>
            <td>6</td>
            <td>4</td>
        </tr>
        <tr>
            <td>b</td>
            <td>3</td>
            <td>4</td>
            <td>6</td>
            <td>5</td>
        </tr>
        <tr>
            <td>cc</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>cc</td>
            <td>2</td>
            <td>3</td>
            <td>5</td>
            <td>5</td>
        </tr>
    </tbody>
</table><style>td.hide{display:none}</style>
<script>
    var tb = document.getElementById('tb'), rowscount = tb.rows.length, cellcount = rowscount > 0 ? tb.rows[0].cells.length : 0
        , innerHTML, rowspan, startRow;
    for (var j = 0; j < cellcount; j++) {
        startRow = 0;
        innerHTML = tb.rows[startRow].cells[j].innerHTML
        rowspan = 1;
        for (var i = 1; i < rowscount; i++) {
            if (tb.rows[i].cells[j].innerHTML == innerHTML && (j == 0 || i < startRow + parseInt(tb.rows[startRow].cells[0].getAttribute('rowspan') || 0))) {
                rowspan++;
                tb.rows[i].cells[j].className = 'hide';
            }
            else {
                if (rowspan > 1) tb.rows[startRow].cells[j].setAttribute('rowspan', rowspan);
               
                startRow = i;
                innerHTML = tb.rows[i].cells[j].innerHTML
                rowspan = 1
            }
        }
        if (rowspan > 1) tb.rows[startRow].cells[j].setAttribute('rowspan', rowspan);
    }
</script>

 


原创文章,转载请注明出处:table表格按照第一列合并相同内容

评论(0)Web开发网
阅读(55)喜欢(0)不喜欢(0)JavaScript/Ajax开发技巧