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

更新於: 20-6 月-2020

2K+ 次檢視

開啟你的職業生涯

完成課程,獲得認證

立即開始
廣告