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

来源：互联网发布：智能中医处方软件编辑：程序博客网时间：2024/05/17 01:09

</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.源码下载

源码下载

1 0