最新消息:

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

Web 观测者 917浏览 3评论

相同行合并:

/**
* 合并指定表格(表格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()) {  //这边注意不是val()属性,而是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 == void 0) {
       _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;
           } else if ((_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;
               }
           }
       });
   });
}

用法示例:

//相同行合并
_w_table_rowspan("#dssTable", "2");

//相同列合并
for(i=1;i<=51;i++){
   _w_table_colspan("#dssTable", i, "2");
}

转载请注明:观测者 » 使用jQuery实现table表格中相同内容的行或列合并

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (3)

  1. I was suggested this website by my cousin. I'm not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are amazing! Thanks!
    manicure Taiwan; Republic of China (ROC) Opera Windows 3周前 (04-07)回复
  2. I think the admin of this site is really working hard in favor of his web page, since here every information is quality based data.
    manicure Taiwan; Republic of China (ROC) Opera Windows 4周前 (04-02)回复
  3. We left Dynatable in there because while it hasn t had a commit for a while, it s probably one of the most robust and heavily documented table plugins on the list. It s hard to known why there hasn t been an update in a while, but whenever I use it, it works really well.
    Virtual server Moldova Republic of Mozilla Firefox Windows 4个月前 (12-31)回复