僅在html表中合並具有相同第一列值的行

Question

我有一個動態 html 表，我希望第一列中的行只有在值相同時才合並在一起。 表的圖像。 在第一列中，前兩行值相同，因此應合並它們，但不應合並第三列的行值。

 <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>

我剛剛添加了足夠的內容來展示該功能是如何工作的。