javascript - Merge rows with same value of first column only in html table

Question

I have a dynamic html table, in which I want the rows in the first column only to be merged together if the values are same.Image of table. In the first column, the first two row values are same, so they should be merged but the row values of third column should not be merged.

<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

Ok, have a look at this as an example:

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>