js合并table单元格

       在研发的过程中经常遇到的问题就是单元格合并问题,那么有了它就可以引刃而解了,接下来分享给大家!

      接下来上js加载事件

 function mc(table1, startRow, endRow, col) {
            var tb = document.getElementById(table1);
            if (col >= tb.rows[0].cells.length) {
                return;
            }
            if (col == 0) { endRow = tb.rows.length-1; }
            for (var i = startRow; i < endRow; i++) {
                if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[0].innerHTML) {
                    tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[0]);
                    tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
                    if (i == endRow - 1 && startRow != endRow) {
                        mc(table1, startRow, endRow, col + 1);
                    }
                } else {
                    mc(table1, startRow, i + 0, col + 1);
                    startRow = i + 1;
                }
            }
        }
        mc('table1',0,0,0);

参数说明:

table1:代表table的id值;

startRow:列的开始行

endRow:列的结束行

col:行号

        

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现动态合并居中单元格,可以使用 Bootstrap Table 的自定义列插件。具体步骤如下: 1. 定义自定义列插件,实现合并单元格和居中文本的功能。示例代码如下: ```javascript $.fn.bootstrapTable.columnDefaults.mergeCells = true; $.fn.bootstrapTable.cellStyles.alignCenter = function (field, row, index, value) { return { classes: 'text-center' }; }; $.fn.bootstrapTable.columnDefaults.cellStyle = $.fn.bootstrapTable.cellStyles.alignCenter; $.extend($.fn.bootstrapTable.defaults, { onPostBody: function () { $(this).bootstrapTable('mergeCells', { field: 'fieldName', rowspan: 2, index: 0 }); } }); ``` 2. 在表格中使用自定义列插件。示例代码如下: ```html <table id="table" data-toggle="table" data-url="your/data/url" data-columns="your/data/columns"> <thead> <tr> <th data-field="fieldName" data-align="center" data-halign="center">Field Name</th> <th data-field="field1" data-align="center" data-halign="center">Field 1</th> <th data-field="field2" data-align="center" data-halign="center">Field 2</th> </tr> </thead> </table> ``` 其中,`data-field` 属性指定列的字段名,`data-align` 和 `data-halign` 属性指定水平对齐方式,`data-toggle="table"` 和 `data-url` 属性指定使用 Bootstrap Table 插件和数据源的 URL,`data-columns` 属性指定列的定义。在列定义中,可以使用自定义的插件,如 `mergeCells`。 需要注意的是,这里的 `fieldName` 需要替换为实际的字段名。另外,`rowspan` 属性可以指定合并单元格的行数,`index` 属性可以指定开始合并的行号。 希望这个回答能够帮到你。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值