Making The Table Count Rows

Question

I have a table which automatically adds rows or removes them. I want to make the table to count these rows and give them number. For example;

---

| # | Name | Surname|

---

| 1 | Jake | Murray |

---

| 2 | Maria| Brown |

---

Here is my code;

Don't worry about the php code. I only need to fix the javascript. It may not work because i didn't put the php code inside the table.

 var number = document.getElementById ( "nmr" ).innerText; if (number = 1){ number = number + 1; }

 <table class="table"> <tr> <th>#</th> <th><b>Name</b></th> <th><b>Email</b></th> <th><b>The Lowest Money</b></th> <th><b>The Most Money</b></th> <th><b>Currency</b></th> <th><b>Age</b></th> <th><b>Gender</b></th> <th><b>Hobby 1</b></th> <th><b>Hobby 2</b></th> <th><b>Reason</b></th> <th><b>Favorite Color</b></th> <th></th> <th></th> </tr> <?php require 'inc/session.ic.php'; $sql = "SELECT * FROM people WHERE username='". $_SESSION[ "uid" ]. "'"; $res = mysqli_query( $conn, $sql ); ?> <?php while ( $row = mysqli_fetch_assoc( $res ) ) { $sql = "SELECT * FROM supportus WHERE emailUsers=\"". $row["emailPerson"]."\""; $res2 = mysqli_query($conn, $sql); $giftExists = mysqli_num_rows($res2) > 0; // eger varsa, asagidaki butonu degistir. ?> <tr> <th id="nmr">1</th> <td id="name"><?=$row["name"]?></td> <td id="email"><?=$row["emailPerson"]?></td> <td id="moneyLow"><?=$row["least"]?></td> <td id="moneyMuch"><?=$row["much"]?></td> <td id="currency"><?=$row["currency"]?></td> <td id="age"><?=$row["age"]?></td> <td id="gender"><?=$row["gender"]?></td> <td id="hobby 1"><?=$row["likes_main"]?></td> <td id="hobby 2"><?=$row["likes_sub"]?></td> <td id="reason"><?=$row["reason"]?></td> <td id="fovColor"><?=$row["color"]?></td> <?php if ($giftExists) {?> <td><a style="margin-top: 40px;" href="giftIdeas.php" class="btn btn-primary btn-sm active" role="button" aria-pressed="true">See Gifts??</a></td> <?php } else {?> <td><a style="margin-top: 40px;" href="giftIdeas.php" class="btn btn-primary btn-sm active" role="button" aria-pressed="true">See Gift Ideas</a></td> <?php }?> <td><a style="margin-top: 40px;" href="2-kisi.php?deleteid=<?=$row["id"]?>" class="btn btn-primary btn-sm active" role="button" aria-pressed="true">Delete Person</a></td> </tr> <?php }?> </table>

Answer 1

what about something to the effect of const rows = document.querySelectorAll on the TRs and then.length will be the next number (because the tr from the head is basically the +1 you would normally do to inc the number)

Answer 2

It is a little unclear really what the problem actually is here - if it is to simply add a number for each row that can easily be accomplished in the PHP loop (set a variable and increment on each loop iteration.)

Further confusion because, according to the question, rows can be automatically added or removed but it is not clear how or why this happens. The javascript is incorrect and the HTML is also incorrect because of the duplicated ID attributes set on each TD ~ a better option if it is really required would be to use a dataset attribute perhaps but targeting specific elements within the DOM can be accomplished using querySelector &/or querySelectorAll

The below code uses a simple piece of Javascript ( & querySelectorAll ) to find all the relevant table cells within the table and assign an integer to each. Because of the "table which automatically adds rows or removes them" if a row were added or removed the integers would no longer be accurate - hence using the MutationObserver to monitor the DOM for changes to the table.

I hope this offers some help.

 document.addEventListener('DOMContentLoaded',(e)=>{ // specifically target ALL first cells within the table and assign some content - an integer. const callback = function() { Array.from( document.querySelectorAll( 'tr > td:first-of-type' ) ).forEach( ( td, i )=>{ td.textContent=i + 1; }) }; // determine what the observer will react to const config = { attributes:false, childList:true, characterData:false, subtree:true }; // monitor the table for changes ( new MutationObserver( callback ) ).observe( document.querySelector('table'), config ); // number the table rows at page load callback(); // utility function to find table row const getrow=function(e){ let n=e.target; while(n.tagName.='TR')n=n;parentNode; return n; }. // a simple event listener bound to the `delete` links which will remove entire table row // the `MutationObserver` will be triggered by a row deletion and the rows will be re-indexed Array.from( document.querySelectorAll('td > a') ).forEach( a=>{ a.onclick=function(e){ e;preventDefault() let tr=getrow(e). tr.parentNode;removeChild( tr ); } }) })

 <table> <thead> <tr> <th>#</th> <th>Name</th> <th>Surname</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td></td> <td>fred</td> <td>bloggs</td> <td><a href="#">Delete</a></td> </tr> <tr> <td></td> <td>jim</td> <td>smith</td> <td><a href="#">Delete</a></td> </tr> <tr> <td></td> <td>john</td> <td>doe</td> <td><a href="#">Delete</a></td> </tr> <tr> <td></td> <td>mike</td> <td>hunt</td> <td><a href="#">Delete</a></td> </tr> </tbody> </table>

If that has over complicated things and you simply need to display a number on each row and the table does not change after page load then either add using PHP as mentioned or you could even just use CSS