table表格合并列中相同的内容栏

转自：https://blog.csdn.net/qq_34129814/java/article/details/80255444

页面的table表格中又是需要将相同的数据栏合并，今天就学到了一个简单实用有效的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 
    <table id="table1">
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
        </tr>
        <tr>
            <td>111</td>
            <td>555</td>
            <td>333</td>
        </tr>
        <tr>
            <td>111</td>
            <td>888</td>
            <td>333</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>bbb</td>
            <td>333</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开始  第一列合并相同
          // $("#table1").rowspan(1);//传入的参数是对应的列数从0开始  第二列合并相同
       });
    </script>
 
</script>
</html>

合并前：（手绘和以上HTML代码不同）

111 222 333
111 555 333
444 111 333
222 666 888

合并后：（合并第一列中相同的数据）

111 222 333
    555 333
444 111 333
222 666 888

其实合并的数据默认居中显示

该方法较为实用，进行封装后，其他页面引用调用较为简单 且可以根据具体需求去改变    
大赞！！！

真滴大赞！

 

posted @ 2020-07-02 17:00  xh_Blog  阅读(873)  评论(0)  编辑  收藏  举报