添加一個 <tr> 元素到動態表，動態不刷新頁面，php jquery

Question

我試圖在單擊按鈕時向現有表中添加動態行，該行的行是使用PHP腳本的輸出動態創建的。

我對腳本insert_tr.php進行了ajax調用，該腳本以與現有數據表相同的格式返回了TR元素給我，並適當地返回了數據

但是不幸的是， <tr>行不是動態添加到表中，而是僅在頁面刷新后才添加。

PHP文件代碼：

   <div id="v_div">
    <table class="table table-bordered table-striped" >
     <thead>
        <th class='col-md-2'>name</th>
            <th class='col-md-2'>number</th>
     </thead>

     <tbody>
    <?php  
            while ($data = pg_fetch_assoc($ret)) {

              echo 
              "<tr id=tr_".$data['sr_number'].">
                <td class='td_topic' id=title:".$data['number']." >".trim($data['name'])."</td>
                <td class='td_topic' id=title:".$data['number']." >".trim($data['number'])."</td>
            <td class='td_topic' id=title:".$data['number']." ><button class='btn btn-info check1' type=button title='Add Entry'>Add Entry</button></td>
          </tr>";
    ?> 
       </tbody>
    </table>
    </div>

Javascript：

$(document).ready(function() {
  $("#v_div").on('click', '.check1', function() {
    var field_userid = $(this).parent().attr("id");
    var value = $(this).text();
    $.post('insert_tr.php', field_userid + "=" + value, function(data) {
      if (data != '') {
        $(this).closest("tr").after(data);

      }
    });

  });
});

我要做的就是在當前TR啟用后立即添加行，動態地不刷新頁面，這最終可以使用ajax調用。

Answer 1

到參考this是不被點擊的按鈕。

$(this).closest("tr").after(data);

存儲對Ajax調用之外的行的引用。

$(document).ready(function() {
  $("#v_div").on('click', '.check1', function() {
    var field_userid = $(this).parent().attr("id");
    var value = $(this).text();
    var row = $(this).closest("tr");
    $.post('insert_tr.php', field_userid + "=" + value, function(data) {
      if (data != '') {
        row.after(data);
      }
    });

  });
});