Question

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

问题是每行的第一个td应该递增。

因此，如果上一个td值为5，当我添加新行并将其追加到新行时，它的第一个td值应为6。

这是我的HTML表格：

＆＃13;

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

＆＃13;

以下是包含一些数据的表格：

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

我试过了：

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

得到一个空洞的结果。然后我试了

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

又一个空洞的结果。

Answer 1

试试这个：

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

可能会有所帮助。

Answer 2

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

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

一点额外的说明。我看到您正在使用id删除按钮。确保这些id都是唯一的，或者改为使用class。

JQuery和HTML从表的每一个中获取a的值以增加它

2 个答案: