使用jquery的html表的行距

Question

我有HTML表格，如何使用j-query在特定列上進行行跨度。我想排跨度的具體列，可以在小提琴的演示中可以看出 這裏是Demo

後HTML的結果應該是使用jQuery

下面是HTML。

<p>Before</p> 
<table width="200" border="1"> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td>4</td> 
    <td>1</td> 
    <td>1</td> 
    <td>5</td> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td>5</td> 
    <td>1</td> 
    <td>1</td> 
    <td>3</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>3</td> 
    <td>1</td> 
    <td>6</td> 
    <td>7</td> 
    </tr> 
    <tr> 
    <td>12</td> 
    <td>13</td> 
    <td>14</td> 
    <td>15</td> 
    <td>16</td> 
    </tr> 
    <tr> 
    <td>13</td> 
    <td>131</td> 
    <td>4155</td> 
    <td>464</td> 
    <td>46</td> 
    </tr> 
</table> 
<p>After Sholud be using jquery (dynamically)</p> 

<table width="200" border="1"> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    </tr> 
    <tr> 
    <td rowspan="2">1</td> 
    <td>4</td> 
    <td rowspan="2">1</td> 

    <td rowspan="2">1</td> <td>5</td> 
    </tr> 
    <tr> 
    <td>5</td> 
    <td>3</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>3</td> 
    <td>1</td> 
    <td>6</td> 
    <td>7</td> 
    </tr> 
    <tr> 
    <td>12</td> 
    <td>13</td> 
    <td>14</td> 
    <td>15</td> 
    <td>16</td> 
    </tr> 
    <tr> 
    <td>13</td> 
    <td>131</td> 
    <td>4155</td> 
    <td>464</td> 
    <td>46</td> 
    </tr> 
</table> 

我嘗試這一點，但它不工作

groupTable($('#gvSearchRecord tr:has(td)'), 2,2); 
        $('#gvSearchRecord .deleted').remove(); 

function groupTable($rows, startIndex, total) { 
     if (total === 0) { 
      return; 
     } 

     var i, currentIndex = startIndex, count = 1, lst = []; 
     var tds = $rows.find('td:eq(' + currentIndex + ')'); 
     var ctrl = $(tds[0]); 
     lst.push($rows[0]); 
     for (i = 1; i <= tds.length; i++) { 
      if (ctrl.text() == $(tds[i]).text()) { 
       count++; 
       $(tds[i]).addClass('deleted'); 
       lst.push($rows[i]); 
      } 
      else { 
       if (count > 1) { 
        ctrl.attr('rowspan', count); 
        groupTable($(lst), startIndex + 1, total - 1) 
       } 
       count = 1; 
       lst = []; 
       ctrl = $(tds[i]); 
       lst.push($rows[i]); 
      } 
     } 
    } 

Answer 1

DEMO FIDDLE

我發現最簡單的方法是創建一個二維數組，然後反向穿越它。情況就是如此，因爲rowspan的工作原理是將其自身向下推，並且如果您從下面刪除了匹配元素，那麼在超過2個元素時，您會遇到與其上的元素相匹配的問題。

有假設，無論你的代碼和我正在：

1. 沒有頭錶行（可以通過更改初始processArray元素賦值選擇

2. 無細胞有colspan固定（如果情況並非如此，我會很樂意重新檢查我的代碼）

JS

var processArray = []; 

// make things easier to traverse in reverse by first creating a 2D array of the table 
$('#before tr').each(function(i){ 
    var processRow = []; 
    $(this).find('td').each(function(){ 
     processRow.push($(this)); 
    }); 
    processArray.push(processRow); 
}); 

function computeDuplicates(){ 
    // we are starting at the last row and working up to row 2 
    // we dont need to look at the first row, as we're looking at it from the row below 
    for(var x = processArray.length - 1; x > 0 ; x--){ 
     for(var y = 0; y < processArray[x].length; y++){ 
      if(processArray[x][y].text() == processArray[x-1][y].text()){ //if the cell above has the same text as the current cell 
       var currentRowSpan = processArray[x][y].attr('rowspan'); // get the current cell rowspan 
       if(typeof currentRowSpan == "undefined"){ // no rowspan found on current cell 
        currentRowSpan = 2; // set default of 2 
       }else{ 
        currentRowSpan = parseInt(currentRowSpan, 10) + 1; // increase by 1 
       } 
       // apply currentRowSpan to above cell and delete current cell 
       processArray[x-1][y].attr('rowspan', currentRowSpan); 
       processArray[x][y].remove(); 
      } 
     } 
    } 
    processArray = []; // remove from memory 
} 

computeDuplicates(); 

Answer 2

我已經更新您的jsfiddle例如：

http://jsfiddle.net/bn9m1p6k/6/

我已經刪除列表中的參數，把參數行跨度的數據屬性。 直接應用行跨度時，表格會更改並且以下檢查不正確。 在遍歷所有單元格之後，都會應用刪除和rowspan。 這是完整的代碼：

groupTable($('#gvSearchRecord tr:has(td)'), 0,5); 
$('#gvSearchRecord .deleted').remove(); 
$('#gvSearchRecord td[data-rowspan]').each(function(){ 
    $(this).attr('rowspan', $(this).attr('data-rowspan')); 
}); 

function groupTable($rows, startIndex, total) { 
    if (total === 0) { 
     return; 
    } 

    var i, currentIndex = startIndex, count = 1, lst = []; 
    var tds = $rows.find('td:eq(' + currentIndex + ')'); 
    var ctrl = $(tds[0]); 
    for (i = 1; i < tds.length; i++) { 
     if (ctrl.text() == $(tds[i]).text()) { 
      count++; 
      $(tds[i]).addClass('deleted'); 
     } 
     else { 
      if (count > 1) { 
       ctrl.attr('data-rowspan', count); 
      } 
      count = 1; 
      //lst = []; 
      ctrl = $(tds[i]); 
      //lst.push($rows[i]); 
     } 
    } 
    groupTable($rows, startIndex + 1, total - 1); 
}