jQuery和HTML获得价值 <td> 从头开始 <tr> 表的增量

Question

我有一个HTML表，该表提供了来自MySQL服务器的数据，并且我的初始tr包含要添加更多内容的文本框。 然后将它们附加到同一表中。

问题在于每行的第一个td应该增加。

因此，如果最后一个td值为5，则在我添加新行并将其附加到新行时，它的第一个td值应为6。

这是我的HTML表格：

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

这是带有一些数据的表：

因此，如果我添加另一行，则新行应为2 。

我试过了：

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

并得到了空的结果。 然后我尝试

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

再一次是空的结果。

Answer 1

尝试这个：

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

也许这会有所帮助。

Answer 2

我不确定您实际添加行的JS代码是什么样子，但是我可能会这样做。

 $('#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> 

一点额外的注意。 我看到您正在使用id作为删除按钮。 确保这些id都是唯一的或使用class 。