js遍历tr怎样合并tr

在JavaScript中遍历<tr>元素并合并它们，通常涉及到对表格行的操作。合并<tr>通常意味着将多行数据合并为一行显示，或者是根据某些条件将相邻的行合并为一个单元格。以下是一些基础概念和实现方法：

基础概念

DOM遍历：使用JavaScript遍历DOM树，找到需要操作的<tr>元素。
合并单元格：通过修改rowspan属性来合并单元格，而不是直接合并<tr>元素。
表格结构：理解HTML表格的基本结构，包括<table>, <tr>, <td>, 和 <th>元素。

实现方法

以下是一个简单的示例，展示如何根据某个条件（例如，相邻行的某个单元格内容相同）来合并<tr>中的单元格：

<table id="myTable">
  <tr><td>1</td><td>A</td></tr>
  <tr><td>2</td><td>A</td></tr>
  <tr><td>3</td><td>B</td></tr>
  <tr><td>4</td><td>B</td></tr>
  <tr><td>5</td><td>B</td></tr>
</table>

<script>
function mergeRows() {
  const table = document.getElementById('myTable');
  let rowspan = 1;
  let prevText = '';

  for (let i = 0; i < table.rows.length; i++) {
    const cellText = table.rows[i].cells[1].innerText; // 假设根据第二列的内容合并

    if (cellText === prevText) {
      rowspan++;
      table.rows[i - rowspan + 1].cells[1].rowSpan = rowspan;
      table.rows[i].cells[1].style.display = 'none'; // 隐藏被合并的单元格
    } else {
      rowspan = 1;
      prevText = cellText;
    }
  }
}

mergeRows();
</script>