美文网首页
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);
        }

相关文章

  • 現實

    七夕之夜我下塌石头城一家酒店酒店前台的美眉讨好地將我的房間升級到了最高層從房間落地窗俯瞰地面汽車如蟻緩緩爬行突然意...

  • 現實

    一個人! 對! 就是一個人! 我漸漸的 總算也習慣了 一個人的生活! 不論做什麼, 都只是一個人! ………… 再多...

  • 現實

    最近的疫情弄,處處人心惶惶 而最安全及保險的方式,反而讓許多近距離接觸行業的業績一落千丈 而當然也有一些公司及其他...

  • 現實

    非要把自己的慘烈撕裂開來 給誰看看到了嗎嗯…看不到(此處為問號)是假裝看不到麼噢 假裝看到了…然後呢

  • 2018-04-18

    原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序一开始的时候陷入了一个误区...

  • 关于iview Element table 自适应列宽问题

    Vue + iview-ui 遇到 iview内的table没有原生table那种列宽自适应功能,在iview t...

  • 2018-01-02

    當現實告訴你你所相信的都不屬於現實, 你要相信現實, 還是相信自己?

  • 原生js实现 拖拽改变 table表格列宽

    效果图 代码

  • 自我實現

    待寫

  • 上网语录

    在現實和虛構之間來來去,有時候現實會被虛構,有時候虛構突然成為現實

网友评论

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

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