仅在html表中合并与第一列具有相同值的行 [英] Merge rows with same value of first column only in html table

问题描述

我有一个动态的html表，在该表中，我希望第一列中的行仅在值相同时才合并在一起.

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>

推荐答案

好，以这个为例:

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>

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

I've just added enough to show how the functionality could work.

这篇关于仅在html表中合并与第一列具有相同值的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！