jquery如何新增行

JQuery 是一款免費、開源的 JavaScript 函式庫，使用 JQuery 可以輕鬆完成諸如 DOM 操作、事件處理器、動畫效果和 Ajax 等常見任務。在 Web 開發中，經常需要透過新增行來動態地更新表格、清單等頁面元素。下面我們將介紹 JQuery 如何新增行。

一、在表格中加入行

在 HTML 中，我們可以使用 <table> 標籤來建立表格。為了在表格中新增一行，我們首先需要透過 JQuery 選擇表格中的一個 <tbody> 元素，然後使用 append() 方法向其新增一行。下面是一個範例程式碼：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

<script>
  // 获取 tbody 元素
  var tbody = $('table .table-body');
  
  // 创建一个新行
  var newRow = $('<tr><td>王五</td><td>22</td><td>男</td></tr>');
  
  // 将新行添加到 tbody 中
  tbody.append(newRow);
</script>

在上面的程式碼中，我們首先使用$() 方法來取得表格中的<tbody> 元素，然後使用$('<tr>...')</tr> 建立一個新的行，並將新行加入tbody 中。請注意，如果要新增多行，可以將多個行新增到一個陣列中，然後使用 append() 一次新增。

二、在清單中加入行

在HTML 中，我們可以使用<ul> 或<ol> 標籤建立無序或有序列表。為了在清單中新增一行，我們可以使用 append() 方法在清單中新增一個新的 <li> 元素。下面是一個範例程式碼：

<ul class="list">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<script>
  // 获取列表元素
  var list = $('ul.list');
  
  // 创建一个新的 li 元素
  var newItem = $('<li>梨子</li>');
  
  // 将新元素添加到列表中
  list.append(newItem);
</script>

在上面的程式碼中，我們先使用$() 方法取得清單元素，然後使用$('<li>.. .') 建立一個新的<li> 元素，並將新元素加入清單。

三、總結

透過本文的介紹，我們了解如何使用 JQuery 新增行到表格或清單中。可以看出，使用 JQuery 來操作 DOM 元素非常方便快捷，可以大大提高 Web 開發的效率。如果你還沒嘗試過 JQuery，不妨到官網上下載並學習一下，相信它會為你帶來很多便利。

以上是jquery如何新增行的詳細內容。更多資訊請關注PHP中文網其他相關文章！