如何使用 jQuery 在特定索引處向表格中插入新行?


要將新行插入到表格的某個索引處,請使用 jQuery val() 和 insertBefore() 方法。你可以嘗試執行以下程式碼,瞭解如何向表中插入新行 -

示例

即時演示

<html>
  <head>
  <title>jQuery Example</title>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){          
    $('#index').val($('#myTable tbody tr').length);
    $('#btn1').click(function(){
      var indx = $('#index').val()-1;
      var newRow = $('<tr><td>New row is added at index '+$('#myTable tbody tr').length+'</td></tr>');
      newRow.insertBefore($('#myTable tbody tr:nth('+indx+')'));
   });
  });
</script>
</head>
<body>
  <table id="myTable">
    <tbody>
     <tr>
      <td>This is row 1</td>
     </tr>
     <tr>
      <td>This is row 2</td>
     </tr>
    </tbody>
  </table>
  <input id="index"/>
  <button type="button" id="btn1">Add</button>
</body>
</html>

更新於: 2020 年 6 月 20 日

2K+ 瀏覽

開啟你的 職業生涯

完成課程以獲取認證

開始
廣告
© . All rights reserved.