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>