JS 實現原生Table合餅列

2024-07-15  本文已影响0人  赵优秀
function mergeRows(tableId, columnToMerge) {
            var table = document.getElementById(tableId);
            var rows = table.getElementsByTagName('tr');

            var prevRowData = null;
            var rowspanCount = 1;
            var firstRow = 3;//數據起始行
            for (var i = 3; i < rows.length; i++) {
                var currentRow = rows[i];
                var currentCell = currentRow.cells[columnToMerge];
                var currentRowData = currentCell.innerText;

                if (currentRowData === prevRowData) {
                    // 如果当前行与上一行的数据相同,则增加rowspan计数
                    rowspanCount++;
                    currentCell.style.display = 'none'; // 隐藏重复的td
                } else {
                    // 如果数据不同,更新前一行的rowspan并重置计数器
                    if (i > 0) {
                        rows[firstRow].cells[columnToMerge].setAttribute('rowspan', rowspanCount);
                    }
                    //記錄合餅開始行
                    firstRow = i;
                    rowspanCount = 1;
                }

                prevRowData = currentRowData;

                //從第一行開始合餅
                if(rowspanCount == rows.length-3){
                    rows[3].cells[columnToMerge].setAttribute('rowspan', rowspanCount);
                }
            }

            // 更新最后一行的rowspan
            rows[rows.length - 1].cells[columnToMerge].setAttribute('rowspan', rowspanCount);
        }
上一篇 下一篇

猜你喜欢

热点阅读