使用jQuery实现页面表格中相同内容的行或列合并

分类: jQuery 9人阅读 评论(0) 收藏 举报

网上找到的jQuery方法:

<script language="javascript" type="text/javascript">
 //函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格
 //参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 ,_w_table_SpanNum);
    }else{
     _w_table_firsttd = $(this);
     _w_table_SpanNum = 1;
    }
   }
  }); 
 }

 //函数说明:合并指定表格(表格id为_w_table_id)指定行(行数为_w_table_rownum)的相同文本的相邻单元格
 //参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 ,_w_table_SpanNum);
     }else{
      _w_table_firsttd = $(this);
      _w_table_SpanNum = 1;
     }
    }
   });
  });
 }
</script>

下面是本人写的测试页面:

1:合并相同行的测试页面

<html>
 <head>
  <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function(){
    var rowCount = 4;
    for(var i = 1; i <= rowCount; i++)
    {
     _w_table_rowspan("#w_table_id",i);
    }
   });
  </script>
 </head>
 <body>
  <table >
    <td>广东</td>
    <td>深圳</td>
    <td>00028</td>
    <td>红花油</td>
    <td>403</td>
   </tr>
  </table>
 </body>
</html>

2:合并相同列的测试页面

<html>
 <head>
  <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function(){
    var colCount = 4;
    for(var i = 1; i <= colCount; i++)
    {
     _w_table_colspan("#w_table_id",i);
    }
   });
  </script>  
 </head>
 <body>
  <table >
   <tr>
    <td>广东</td>
    <td>广东</td>
    <td>广东</td>
    <td>广东</td>
    <td>广东</td>
    <td>广东</td>
    <td>广东</td>
    <td>广东</td>
    <td>广东</td>
   </tr>
   <tr>
    <td>深圳</td>
    <td>深圳</td>
    <td>深圳</td>
    <td>广州</td>
    <td>广州</td>
    <td>深圳</td>
    <td>深圳</td>
    <td>深圳</td>
    <td>深圳</td>
   </tr>
   <tr>
    <td>00028</td>
    <td>00028</td>
    <td>00028</td>
    <td>00027</td>
    <td>00028</td>
    <td>00028</td>
    <td>00028</td>
    <td>00028</td>
    <td>00028</td>
   </tr>
   <tr>
    <td>红花油</td>
    <td>红花油</td>
    <td>红花油</td>
    <td>白花油</td>
    <td>红花油</td>
    <td>红花油</td>
    <td>红花油</td>
    <td>红花油</td>
    <td>红花油</td>
   </tr>
   <tr>
    <td>100</td>
    <td>101</td>
    <td>102</td>
    <td>200</td>
    <td>300</td>
    <td>400</td>
    <td>401</td>
    <td>402</td>
    <td>403</td>
   </tr>
  </table>
 </body>
</html>

相关文章:

  • 2021-12-07
  • 2022-12-23
  • 2022-12-23
  • 2022-01-23
  • 2021-10-25
  • 2022-12-23
  • 2021-06-13
  • 2022-01-03
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-10-17
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案