html原生table动态值合并

strap

已于 2024-06-03 17:19:08 修改

阅读量230

点赞数 4

分类专栏：前端随记文章标签： html javascript 前端

于 2024-06-03 16:48:47 首次发布

本文链接：https://blog.csdn.net/strap/article/details/139418703

版权

前端随记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

原生table值合并

mergeTableRows(“testTab”, [0, 1, 2])第二个参数控制需要动态合并的列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生表格值合并</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<table id="testTab">
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>科目</th>
        <th>分数</th>
    </tr>
    <tr>
        <td>四年（1）班</td>
        <td>小明</td>
        <td>数学</td>
        <td>35</td>
    </tr>
    <tr>
        <td>四年（1）班</td>
        <td>小明</td>
        <td>语文</td>
        <td>60</td>
    </tr>
    <tr>
        <td>四年（1）班</td>
        <td>小明</td>
        <td>语文</td>
        <td>61</td>
    </tr>
    <tr>
        <td>四年（1）班</td>
        <td>小林</td>
        <td>语文</td>
        <td>61</td>
    </tr>
    <tr>
        <td>四年（1）班</td>
        <td>小李</td>
        <td>数学</td>
        <td>70</td>
    </tr>
    <tr>
        <td>四年（1）班</td>
        <td>小李</td>
        <td>语文</td>
        <td>82</td>
    </tr>
    <tr>
        <td>四年（2）班</td>
        <td>小达</td>
        <td>语文</td>
        <td>82</td>
    </tr>

</table>


<script>
    function isSamePre(map, row, colIndex) {
        if (colIndex < 1){
            return true;
        }
        var cell = row.cells[colIndex];
        var key = colIndex + "@" + cell.innerText;
        var target = map[key];
        var preValue = "";
        for (var i = 0; i < colIndex; i++) {
            preValue += row.cells[i].innerText + "@";
        }
        if (target !== preValue){
            map[key] = preValue;
        }
        return !target || target === preValue;
    }
    function mergeTableRows(tableId, columnIndices) {
        var table = document.getElementById(tableId);
        var rows = table.rows;
        var spanCounts = [];
        var lastValues = [];

        for (var i = 0; i < columnIndices.length; i++) {
            spanCounts[i] = 0;
            lastValues[i] = null;
        }

        var map = {};
        for (var rowIndex = 1; rowIndex < rows.length; rowIndex++) {
            var row = rows[rowIndex];
            for (var i = 0; i < columnIndices.length; i++) {
                var colIndex = columnIndices[i];
                var cell = row.cells[colIndex];
                var cellValue = cell.innerText;
                if (isSamePre(map, row, colIndex) && cellValue === lastValues[i]) {
                    spanCounts[i]++;
                    rows[rowIndex - spanCounts[i]].cells[colIndex].rowSpan = spanCounts[i] + 1;
                    cell.style.display = 'none';
                } else {
                    lastValues[i] = cellValue;
                    spanCounts[i] = 0;
                }
            }
        }
    }

    mergeTableRows("testTab", [0, 1, 2]);
</script>

</body>
</html>