美文网首页
JS 實現原生Table合餅列

JS 實現原生Table合餅列

作者: 赵优秀 | 来源:发表于2024-07-15 13:58 被阅读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);
            }
    

    相关文章

      网友评论

          本文标题:JS 實現原生Table合餅列

          本文链接:https://www.haomeiwen.com/subject/ogjhhjtx.html