Javascript合併單元格方法總結

最新推荐文章于 2021-04-05 12:32:40 发布

那是遇知吧

最新推荐文章于 2021-04-05 12:32:40 发布

阅读量328

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_41406727/article/details/95045985

版权

本文总结了三种JavaScript合并表格单元格的方法。方法一和方法三分别通过原生JS和jQuery实现，详细阐述了使用步骤和注意事项。方法二提供了一个合并函数，包括参数解释和示例。特别强调了在合并多列时，需按列序从大到小处理，以确保正确合并。

摘要由CSDN通过智能技术生成

合併單元格方法一：

HTML：

  <table id="table1" border="1" class="tbspan">
        <tr>
            <td>A</td>
            <td>B</td>
            <td>B</td>
            <td>C</td>
            <td>C</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>

JS：

jQuery.fn.rowspan = function(colIdx) {
        return this.each(function(){
            var that;
            $('tr', this).each(function(row) {
                $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
                    if (that!=null && $(this).html() == $(that).html() && $(this).html() != '&nbsp;' && $(that).html() != '&nbsp;') {
                            rowspan = $(that).attr("rowSpan");
                            if (rowspan == undefined){
                                $(that).attr("rowSpan",1);
                                rowspan = $(that).attr("rowSpan");
                            }
                            rowspan = Number(rowspan)+1;
                            $(that).attr("rowSpan",rowspan);
                            $(this).hide();
                        } else {
                            that = this;
                        }
                    }