JQuery and HTML Getting the value of a <td> from the every first <tr> of a table to increment it

Question

I have an HTML table which provide data from MySQL server, and I have the inital tr contains text boxes to add more. And then append them into the same table.

The problem is that the first td of each row should increment.

So If the last td value is 5, when I add new row and append it to a new line, it's first td value should be 6.

Here is my HTML table:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr id="after_tr"> <th colspan="4" style="text-align: center">Diabetes assessment result for patient <?php echo $res[0]['patient_name_en'] ?></th> </tr> <tr class="bg-info"> <th>#</th> <th>Date Of Assessment</th> <th>Assessment Result</th> <th colspan="5" style="text-align:center">Actions</th> </tr> <?php $i = 1; foreach($res as $result) { if($result['date_of_assessment']!="") { ?> <tr> <td style="text-align: center"><?php echo $i++ ?></td> <td><?php echo $result['date_of_assessment'] ?></td> <td><?php echo $result['assessment_result'] ?></td> <td><button type="button" class="btn btn-danger" name="delete_assessment" id="delete_assessment"><i class="fa fa-remove"></i></button></td> </tr> </table> 

Here is the table with some data:

So if I added another line, it should be 2 for the new row.

I tried:

console.log($('td:first-child').text())

And got an empty result. Then I tried

$('tr').parent().siblings(":first").text()

And again an empty result.

Answer 1

try this:

$('tr').find('td:first').text();

May be this would be helpful.

Answer 2

I'm not sure what your JS code for actually adding the row looks like, but this is how I would probably do it.

 $('#addRow').on('click', function() { // get the last tr var $lastTr = $('tr').last(); // get the text for the first td of the last tr var firstTdText = $lastTr.children('td').first().text(); // try to increment the number var newTdText = '-'; try { newTdText = parseInt(firstTdText) + 1; } catch(e) {} var buttonHtml = '<button type="button" class="btn btn-danger delete_assessment" name="delete_assessment"><i class="fa fa-remove"></i></button>'; // create a new tr, append all tds and insert the tr after the last tr $('<tr>') .append($('<td>').css('text-align','center').text(newTdText)) .append($('<td>').text('some date')) .append($('<td>').text('some number')) .append($('<td>').html(buttonHtml)) .insertAfter($lastTr); }); 

 /* these styles aren't needed of course, but I added this because it all looked a little packed together in this example */ th, td { padding: 6px !important; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr id="after_tr"> <th colspan="4" style="text-align: center">Diabetes assessment result for patient X</th> </tr> <tr class="bg-info"> <th>#</th> <th>Date Of Assessment</th> <th>Assessment Result</th> <th colspan="5" style="text-align:center">Actions</th> </tr> <tr> <td style="text-align: center">1</td> <td>2017-07-28</td> <td>70</td> <td><button type="button" class="btn btn-danger delete_assessment" name="delete_assessment" id="delete_assessment"><i class="fa fa-remove"></i></button></td> </tr> </table> <button id="addRow">Add row</button> 

A little extra note. I see that you're using an id for the delete button. Make sure that those id s are all unique or use a class instead.