Question

我recently answered a question涉及合并HTML表的行。我这样做的方法是采用两个行元素的cells属性，然后合并它们。

如果存在一种特定类型的值，该值应始终作为合并的一部分覆盖，则这将变得更加复杂。

我想可以做这样的事情：

const getOnlyValidCells = (cellsObject, invalidValue) => Object.keys(cellsObject)
  .reduce((prev, curr) => ({
    ...prev,
    [curr]: cellsObject[curr].innerHTML === invalidValue ? null : cellsObject[curr]
  }), {});


const mergeRows = (rowOne, rowTwo) => {
  const rowOneCells = getOnlyValidCells(rowOne.cells, 'n/a')
  const rowTwoCells = getOnlyValidCells(rowTwo.cells, 'n/a')
  
  return {
    ...rowOneCells,
    ...rowTwoCells,
  }
}

const result = mergeRows(
  document.getElementById('row-one'),
  document.getElementById('row-two')
)

console.dir(result)

td {
  font-family: arial;
  padding: 5px 10px;
  border-bottom: solid 1px rgb(10, 0, 0)
}

<table id="table">
  <tr id="row-one">
    <td>1</td>
    <td>1</td>
    <td>n/a</td>
    <td>n/a</td>
  </tr>
  <tr id="row-two">
    <td>n/a</td>
    <td>2</td>
    <td>3</td>
    <td>n/a</td>
  </tr>
</table>

但是正如您所看到的，我们仅从第二个合并对象中获取值。我认为这是因为以这种方式合并使用键来确定值，并且由于所有键都存在，因此合并将从第二个对象中获取键。

输出应为

{
  "0": <td>1</td>,
  "1": <td>2</td>,
  "2": <td>3</td>,
  "3": null
}

即。如果两个值中都有值，则取第二个值；如果一个值是真值，则取唯一的真值；如果两个值都不是真值，则返回null。

我的问题是：

有没有一种方法可以合并对象，以便我们可以检查键并删除错误的值？
是否有更好的方法？（我的意思是，更好，更简洁，更少hacky）
是否有一种很好的方法将这样的对象附加到表上，而无需编写函数来迭代值，将单元格附加到新行，将文本节点附加到单元格等？

使用javascript，如何合并表格的两行？

0 个答案: