js中table把相同的内容合并列

最新推荐文章于 2024-04-07 17:19:06 发布

不脱发的尼古拉斯萧瑟

最新推荐文章于 2024-04-07 17:19:06 发布

阅读量712

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/VIP_1205169154/article/details/103904892

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

代码如下：

<html>
<body>
<table id="table">
        <tr>
            <td>小明</td>
            <td>10</td>
            <td>小学生</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>15</td>
            <td>333</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>16</td>
            <td>333</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>17</td>
            <td>18</td>
        </tr>
    </table>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
    jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
          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;
                   }
                });
             });
          });
       }
       $(function() {
          $("#table1").rowspan(0);//传入的参数是对应的列数从0开始  第一列合并相同
          // $("#table").rowspan(1);//传入的参数是对应的列数从0开始  第二列合并相同
       });
    </script>
</body>
</html>