JQuery合并table单元格--有限制（table格式需要注意）

JS代码：

              <scriptsrc="../js/jquery-1.6.1.min.js"type="text/javascript"></script>

    <linkhref="../css/common.css"rel="stylesheet"type="text/css"/>

    <scripttype="text/javascript">

        //函数说明：合并指定表格（表格id为_w_table_id）指定列（列数为_w_table_colnum）的相同文本的相邻单元格  

        //参数说明：_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data   

        //参数说明：_w_table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。  

        function_w_table_rowspan(_w_table_id,_w_table_colnum) {

            _w_table_firsttd="";

            _w_table_currenttd="";

            _w_table_SpanNum=0;

            _w_table_Obj=$(_w_table_id+" tr td:nth-child("+_w_table_colnum+")");

            _w_table_Obj.each(function (i) {

                if (i==0) {

                    _w_table_firsttd=$(this);

                    _w_table_SpanNum=1;

                } else {

                    _w_table_currenttd=$(this);

                    if (_w_table_firsttd.text() ==_w_table_currenttd.text()) {

                        _w_table_SpanNum++;

                        _w_table_currenttd.hide(); //remove();  

                        _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);

                    } else {

                        _w_table_firsttd=$(this);

                        _w_table_SpanNum=1;

                    }

                }

            });

        }

 

        //函数说明：合并指定表格（表格id为_w_table_id）指定行（行数为_w_table_rownum）的相同文本的相邻单元格  

        //参数说明：_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ，此参数应为 #data   

        //参数说明：_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。  

        //          如果为数字，则从最左边第一行为1开始算起。  

        //          "even" 表示偶数行  

        //          "odd" 表示奇数行  

        //          "3n+1" 表示的行数为1、4、7、10.......  

        //参数说明：_w_table_maxcolnum 为指定行中单元格对应的最大列数，列数大于这个数值的单元格将不进行比较合并。  

        //          此参数可以为空，为空则指定行的所有单元格要进行比较合并。  

        function_w_table_colspan(_w_table_id,_w_table_rownum,_w_table_maxcolnum) {

            if (_w_table_maxcolnum==void0) { _w_table_maxcolnum=0; }

            _w_table_firsttd="";

            _w_table_currenttd="";

            _w_table_SpanNum=0;

            $(_w_table_id+" tr:nth-child("+_w_table_rownum+")").each(function (i) {

                _w_table_Obj=$(this).children();

                _w_table_Obj.each(function (i) {

                    if (i==0) {

                        _w_table_firsttd=$(this);

                        _w_table_SpanNum=1;

                    } elseif ((_w_table_maxcolnum>0) && (i>_w_table_maxcolnum)) {

                        return"";

                    } else {

                        _w_table_currenttd=$(this);

                        if (_w_table_firsttd.text() ==_w_table_currenttd.text()) {

                            _w_table_SpanNum++;

                            _w_table_currenttd.hide(); //remove();  

                            _w_table_firsttd.attr("colSpan",_w_table_SpanNum);

                        } else {

                            _w_table_firsttd=$(this);

                            _w_table_SpanNum=1;

                        }

                    }

                });

            });

        } 

 

    </script>

    <scripttype="text/javascript"><!--

        $(document).ready(function () {

            alert("ok");

            _w_table_rowspan("#tab",1);

            _w_table_rowspan("#tab",2);

            _w_table_rowspan("#tab",3);

 

            //            _w_table_rowspan("#spdata", 3);

            //            _w_table_rowspan("#spdata", 2);

            //            _w_table_rowspan("#spdata", 1);

        }); 

// -->  

</script> 

HTML表格格式：

            <tableid="tab"  border="1">

            <trclass="left_title_header">

                <tdclass="style2">

                   I级分类</td>

                <tdclass="style2">

                    II级分类</td>

   

                <tdclass="style2">

                   可用试题数量</td>

            </tr>

            <trclass="left_title_2"align="center">

                <tdalign="center">

                   基础类</td>

                <tdalign="center">

                    语言类</td>

                <tdalign="center">

                    3</td>

      

            </tr>

         <trclass="left_title_2"align="center">

                <tdalign="center">

                   基础类</td>

                <tdalign="center">

                    管理类</td>

                <tdalign="center">

                    3</td>

      

            </tr><trclass="left_title_2"align="center">

                <tdalign="center"class="style2">

                   基础类</td>

                <tdalign="center"class="style2">

                    动作类</td>

                <tdalign="center"class="style2">

                    4</td>

      

            </tr><trclass="left_title_2"align="center">

                <tdalign="center">

                   基础类</td>

                <tdalign="center">

                    视觉类</td>

                <tdalign="center">

                    4</td>

      

            </tr><trclass="left_title_2"align="center">

                <tdalign="center">

                    技术类</td>

                <tdalign="center">

                    软件开发类</td>

                <tdalign="center">

                    5</td>

      

            </tr><trclass="left_title_2"align="center">

                <tdalign="center">

                    技术类</td>

                <tdalign="center">

                    生物制药类</td>

                <tdalign="center">

                    5</td>

      

            </tr><trclass="left_title_2"align="center">

                <tdalign="center">

                    技术类</td>

                <tdalign="center">

                    医学类</td>

                <tdalign="center">

                    5</td>

      

            </tr>

        </table>

             效果：

 

转载于:https://www.cnblogs.com/yinxiaofeng/archive/2012/09/05/2672356.html