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 。