Rowspan таблицы html с помощью jquery

Question

У меня есть таблица HTML, как сделать строку span в определенных столбцах с помощью j-запроса. я хочу, чтобы грести срок на определенных столбцов, как можно увидеть в демо скрипку здесь 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

Самый простой способ я нашел в том, чтобы создать 2D массив, а затем пройти в обратном направлении. Это было так, как rowspan работает, нажав себя вниз, и если вы удалите соответствующий элемент снизу, у вас возникнет проблема с соответствием элементу над ним, когда более двух находятся друг над другом.

Есть предположения, что и ваш код и мои которые делают:

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 параметра в данном атрибуте. Когда строка rowspan применяется непосредственно, таблица изменяется, а следующие проверки неверны. Оба удаления и 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); 
}