JQuery объединить строки таблицы и заполнить значениями

Question

У меня есть HTML таблица с объединенными строками. Мне нужно их объединить и заполнить соответствующими значениями.

|column 1|column 2|column 3|column 4|column 5|column 6|
-------------------------------------------------------
|        |  Green |apples  |        |  cow   |   23   |
         ------------------         -------------------
|  John  |  Red   |Oranges |February|  lion  |   18   |
         ------------------         -------------------
|        |        |apples  |        |        |   45   |
---------         ------------------         ----------
|        |  Blue  |oranges | April  |  cow   |   23   |
                  ------------------         ----------
|  Mary  |        |        |  May   |        |   49   |
          --------         ----------------------------
|        |  green | apples |  June  |  cat   |   67   |
          --------         ----------------------------
|        |  red   |        |  July  |  mouse |   32   |
-------------------------------------------------------

В конце это должно выглядеть так:

|column 1|column 2|column 3|column 4|column 5|column 6|
-------------------------------------------------------
|  John  |  Green |apples  |February|  cow   |   23   |
-------------------------------------------------------
|  John  |  Red   |Oranges |February|  lion  |   18   |
-------------------------------------------------------
|  John  |  Blue  |apples  |February|  cow   |   45   |
-------------------------------------------------------
|  Mary  |  Blue  |oranges |  April |  cow   |   23   |
-------------------------------------------------------
|  Mary  |  Blue  |apples  |   May  |  dog   |   49   |
-------------------------------------------------------
|  Mary  |  green |apples  |  June  |  cat   |   67   |
-------------------------------------------------------
|  Mary  |  red   |apples  |  June  |  mouse |   32   |
-------------------------------------------------------

Я понятия не имею, как это сделать.

table, td{
  border:1px solid grey;
  margin:2em
}

td {
  padding: 1em;
  border-collapse: collapse;
}

<table>
<tbody>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
<tr>
<td rowspan="2">John</td>
<td>green</td>
<td>apples</td>
<td rowspan="2">February</td>
<td>cow</td>
</tr>
<tr>
<td>red</td>
<td>oranges</td>
<td>lion</td>
</tr>
<tr>
<td rowspan="2">Mary</td>
<td>blue</td>
<td rowspan="2">meat</td>
<td rowspan="2">May</td>
<td>dog</td>
</tr>
<tr>
<td>white</td>
<td>cat</td>
</tr>
</tbody>
</table>

Answer 1

Вот один из подходов:

1. Инициализация массива того же размера, что и таблица назначения.
2. Выполнение по строке существующей таблицы и заполнение массива
3. Используйте полученный массив для перестройки нужной таблицы

См. Шаги 1 и 2 (& 3) в демонстрационной версии ниже:

jQuery($ => {
  $table = $('table tbody');
  let rows = $table.find('tr').length;
  let columns = $table.find('tr').not(':has(td[rowspan]').first().find('td').length;
  let table = [];
  for (let j = 0; j < rows; j++) {
    table[j] = [];
    for (let l = 0; l < columns; l++) {
      table[j][l] = null;
    }
  }
  let row = 0;
  $('tr').each(function() {
    let column = 0;
    $('td', this).each(function() {
      while(table[row][column]) {
        column++;
      }
      table[row][column] = $(this).text();
      if ($(this).is('[rowspan]')) {
        for (let i = 0; i < +$(this).attr('rowspan') - 1; i++) {
          let thisrow = row+i+1;
          table[thisrow][column] = $(this).text();
        }
      }
      column++;
    });
    row++;
  });
  
  //step 3
  //empty the table
  $table.empty();
  //rebuild the table
  for (let k = 0; k < table.length; k++) {
    $table.append( 
      $('<tr/>').append(
        table[k].map(col => $('<td/>').text( col ))
      )
    );
  }
});

table, td{
  border:1px solid grey;
  margin:2em
}

td {
  padding: 1em;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
<tr>
<td rowspan="2">John</td>
<td>green</td>
<td>apples</td>
<td rowspan="2">February</td>
<td>cow</td>
</tr>
<tr>
<td>red</td>
<td>oranges</td>
<td>lion</td>
</tr>
<tr>
<td rowspan="2">Mary</td>
<td>blue</td>
<td rowspan="2">meat</td>
<td rowspan="2">May</td>
<td>dog</td>
</tr>
<tr>
<td>white</td>
<td>cat</td>
</tr>
</tbody>
</table>