jquery.table.rowspan.js 表格自动合并单元格插件

最新推荐文章于 2024-02-02 14:19:00 发布

tongyiyi

最新推荐文章于 2024-02-02 14:19:00 发布

阅读量1.7w

点赞数 4

分类专栏： C#专栏

C#专栏专栏收录该内容

22 篇文章 0 订阅

订阅专栏

</pre>日常开发中，经常遇到表格里需要自动合并单元格，考虑到写服务器控件比较消耗性能，因些还是把这种工作交给客户端Javascript去做吧，基于习惯用jquery框架，所以封装了一个Jquery插件。<p></p><p>1.新创建一个js文件，命名为jquery.table.rowspan.js</p><pre code_snippet_id="1648177" snippet_file_name="blog_20160415_1_9842811" name="code" class="javascript">(function ($) {
    $.fn.extend({
        //表格合并单元格，colIdx要合并的列序号，从0开始
        "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()) {
                            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;
                        }
                    });
                });
            });
        }
    });

})(jQuery);

2.使用实例

<!DOCTYPE html>
<html>
<head><title>
	表格单元格合并Demo
</title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    
    <script type="text/javascript" src="Scripts/jquery.table.rowspan.js"></script>
    <script type="text/javascript">

        function initLoad() {
        
                $("#tbListTM").rowspan(0); //第一列合并
                $("#tbListTM").rowspan(1);//第二列合并
          
        }
        $(document).ready(function () {
            initLoad();
        });
    </script>
    <style>
        .Nlist_con table {
            border-left: 1px solid #c9c9c9;
            border-top: 1px solid #c9c9c9;
            border-collapse: collapse;
        }

            .Nlist_con table th {
                border-right: 1px solid #c9c9c9;
                border-bottom: 1px solid #c9c9c9;
                background: #ececec;
                padding: 10px 5px;
                font-size: 14px;
                color: #2586d8;
                font-family: "宋体";
            }

            .Nlist_con table td {
                border-right: 1px solid #c9c9c9;
                border-bottom: 1px solid #c9c9c9;
                background: #fff;
                padding: 6px 3px;
                font-size: 12px;
                line-height: 20px;
                color: #676767;
            }

                .Nlist_con table td a {
                    text-decoration: none;
                    color: #2586d8;
                    cursor: pointer;
                }

                    .Nlist_con table td a:hover {
                        text-decoration: underline;
                        color: #2586d8;
                    }

    </style>
</head>
<body>
    <div class="Nlist_con">
        <table border="1" cellspacing="1" cellpadding="0" width="100%" id="tbListTM">
            <tr align="center">
                <th>
                    发展领域
                </th>
                <th>
                    发展要素
                </th>
                <th style="width:60px">
                    年度
                </th>
                <th style="width:100px">
                    评价内容
                </th>
                <th>
                    分值
                </th>
                <th>
                    评价办法
                </th>

            </tr>

            <tr>
                <td style="text-align: center">
                    学校发展目标
                </td>
                <td>
                    1.学校有先进办学理念，办学目标符合教育改革发展要求，符合学校实际和发展规律，体现出阶段性、递进性和自身特别。
                </td>
                <td>
                    <span id="ctl00_ContentPlaceHolder1_rptListTM_ctl00_lblND">2015</span>
                </td>
                <td>
                    ee
                </td>
                <td>
                    2
                </td>
                <td>办法1</td>
            </tr>

            <tr>
                <td style="text-align: center">
                    学校发展目标
                </td>
                <td>
                    1.学校有先进办学理念，办学目标符合教育改革发展要求，符合学校实际和发展规律，体现出阶段性、递进性和自身特别。
                </td>
                <td>
                    <span id="ctl00_ContentPlaceHolder1_rptListTM_ctl01_lblND">2016</span>
                </td>
                <td>
                    dd
                </td>
                <td>
                    2
                </td>
                <td>办法2</td>
            </tr>

            <tr>
                <td style="text-align: center">
                    学校发展目标
                </td>
                <td>
                    1.学校有先进办学理念，办学目标符合教育改革发展要求，符合学校实际和发展规律，体现出阶段性、递进性和自身特别。
                </td>
                <td>
                    <span id="ctl00_ContentPlaceHolder1_rptListTM_ctl02_lblND">2017</span>
                </td>
                <td>
                    ff
                </td>
                <td>
                    2
                </td>
                <td>办法3</td>
            </tr>

            <tr>
                <td style="text-align: center">
                    学校发展目标
                </td>
                <td>
                    2.培养目标符合教育方针。注重促进学生、教师主动发展和个性特长的发展，体现学校的个性与特色。
                </td>
                <td>
                    <span id="ctl00_ContentPlaceHolder1_rptListTM_ctl03_lblND">2015</span>
                </td>
                <td></td>
                <td>
                    0
                </td>
                <td></td>
            </tr>

            <tr>
                <td style="text-align: center">
                    学校发展目标
                </td>
                <td>
                    2.培养目标符合教育方针。注重促进学生、教师主动发展和个性特长的发展，体现学校的个性与特色。
                </td>
                <td>
                    <span id="ctl00_ContentPlaceHolder1_rptListTM_ctl04_lblND">2016</span>
                </td>
                <td></td>
                <td>
                    0
                </td>
                <td></td>
            </tr>

            <tr>
                <td style="text-align: center">
                    学校发展目标
                </td>
                <td>
                    2.培养目标符合教育方针。注重促进学生、教师主动发展和个性特长的发展，体现学校的个性与特色。
                </td>
                <td>
                    <span id="ctl00_ContentPlaceHolder1_rptListTM_ctl05_lblND">2017</span>
                </td>
                <td></td>
                <td>
                    0
                </td>
                <td></td>
            </tr>

        </table>

    </div>

</body>
</html>

3.效果演示

4.源码下载

源码下载

tongyiyi

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
5
评论
jquery.table.rowspan.js 表格自动合并单元格插件

日常开发中，经常遇到表格里需要自动合并单元格，考虑到写服务器控件比较消耗性能，因些还是把这种工作交给客户端Javascript去做吧，基于习惯用jquery框架，所以封装了一个Jquery插件。1.新创建一个js文件，命名为jquery.table.rowspan.js(function ($) { $.fn.extend({ //表格合并单元格，colIdx要
复制链接

扫一扫