仅在html表中合并具有相同第一列值的行

Question

我有一个动态 html 表，如果值相同，我希望仅将第一列中的行合并在一起。Image of table。第一列的前两行值相同，应该合并，但第三列的行值不应该合并。

<table id="example1" class="table table-bordered">
  <thead>
    <th class="hidden"></th>
    <th>Area</th>
    <th>Name</th>
    <th>Party</th>
    <th>Symbol</th>
    <th>Total Number of Votes</th>
  </thead>
  <tbody>
    <?php
                    $query="SELECT * FROM `candidates` ";
                    $result=mysqli_query($con,$query);
                    
                    while($row = mysqli_fetch_array($result)){
                      $sql1 = "SELECT `Name`,`Symbol` FROM `party` WHERE `Party_ID` = '".$row["Party_ID"]."' " ;
                      $query1 = $con->query($sql1);
                      $row1 = $query1->fetch_assoc();
                      $sql2 = "SELECT `Name` FROM `part` WHERE `Part_No` = '".$row["Part_No"]."' " ;
                      $query2 = $con->query($sql2);
                      $row2 = $query2->fetch_assoc();
                      $time1 = filemtime("../party/".$row['Symbol']);
                      echo "
                        <tr>
                          <td class='hidden'></td>
                          <td>".$row2['Name']."</td>
                          <td>".$row['Name']."</td>
                          <td>".$row1['Name']."</td>
                          <td><img src='../party/".$row1['Symbol']."?".$time1."' alt='".$row1['Symbol']."' role='button' width='30px' height='30px' onclick='window.open(this.src)'></td>
                          <td>".$row['Total_Votes']."</td>
                        </tr>
                      ";
                    }
                  ?>
  </tbody>
</table>

Answer 1

好的，以这个为例：

function mergeCells() {
  let db = document.getElementById("databody");
  let dbRows = db.rows;
  let lastValue = "";
  let lastCounter = 1;
  let lastRow = 0;
  for (let i = 0; i < dbRows.length; i++) {
    let thisValue = dbRows[i].cells[0].innerHTML;
    if (thisValue == lastValue) {
      lastCounter++;
      dbRows[lastRow].cells[0].rowSpan = lastCounter;
      dbRows[i].cells[0].style.display = "none";
    } else {
      dbRows[i].cells[0].style.display = "table-cell";
      lastValue = thisValue;
      lastCounter = 1;
      lastRow = i;
    }
  }
}

window.onload = mergeCells;

table {border-collapse: collapse;}
td {border:1px solid black; vertical-align: top;}

<table id="datatable">
  <tbody id="databody">
    <tr><td>1</td><td>Text item 1</td></tr>
    <tr><td>1</td><td>Text item 10</td></tr>
    <tr><td>2</td><td>Text item 3</td></tr>
    <tr><td>2</td><td>Text item 9</td></tr>
    <tr><td>3</td><td>Text item 7</td></tr>
    <tr><td>4</td><td>Text item 6</td></tr>
    <tr><td>5</td><td>Text item 2</td></tr>
    <tr><td>5</td><td>Text item 4</td></tr>
    <tr><td>5</td><td>Text item 5</td></tr>
    <tr><td>5</td><td>Text item 8</td></tr>
  </tbody>
</table>

我刚刚添加了足够的内容来展示该功能如何工作。