jquery搜尋表格內容嗎

在編寫網頁應用程式時，表格是一種常見的資料展示方式。通常，這些表格會包含大量的數據，使得使用者需要進行搜索，以便篩選出滿足其需求的特定數據。為此，我們可以使用jQuery來實作表格搜尋功能。

首先，我們需要在HTML中建立一個表格，並在其中新增表頭和資料行：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

接下來，我們需要編寫jQuery程式碼來實作搜尋功能。首先，我們將表格內容轉換為數組，並保存在一個變數中：

$(document).ready(function() {
  var tableData = [];
  $('#myTable tbody tr').each(function(row, tr) {
    tableData[row] = {
      'name': $(tr).find('td:eq(0)').text(),
      'age': $(tr).find('td:eq(1)').text(),
      'gender': $(tr).find('td:eq(2)').text()
    }
  });
});

在此程式碼中，我們使用了jQuery的each方法來遍歷表格的每一行，並將其轉換為一個包含3個屬性（姓名、年齡、性別）的物件。其中，我們使用了eq方法來取得每個單元格的索引值，並使用text方法來取得單元格中的文字內容。

接下來，我們可以寫一個搜尋函數，用於根據使用者輸入的關鍵字過濾表格資料。在此函數中，我們使用了jQuery的grep方法，該方法可用於在陣列中尋找特定元素：

function searchTable(inputVal) {
  var filteredData = $.grep(tableData, function(item) {
    return item.name.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.age.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.gender.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
  });
  return filteredData;
}

在此程式碼中，我們使用了toLowerCase方法將關鍵字和表格資料轉換為小寫字母，從而實現大小寫不敏感的搜尋。然後，我們使用indexOf方法來尋找包含關鍵字的表格資料。

最後，我們需要綁定一個事件處理程序，以便在使用者輸入關鍵字時呼叫搜尋函數，並更新表格內容：

$('#searchInput').on('keyup', function() {
  var inputVal = $(this).val();
  var filteredData = searchTable(inputVal);
  var tableRows = '';
  $.each(filteredData, function(index, data) {
    tableRows += '<tr>' +
                   '<td>' + data.name + '</td>' +
                   '<td>' + data.age + '</td>' +
                   '<td>' + data.gender + '</td>' +
                 '</tr>';
  });
  $('#myTable tbody').html(tableRows);
});

在此程式碼中，我們使用了keyup事件來監聽使用者輸入，並取得文字方塊中的關鍵字。然後，我們呼叫搜尋函數，取得過濾後的表格數據，並將其轉換為HTML程式碼，以便更新表格內容。

綜上所述，我們使用jQuery編寫了一段程式碼，實作了基於關鍵字的表格搜尋功能。透過這種方式，使用者可以輕鬆找到特定的數據，提高了系統的可用性和使用者體驗。

以上是jquery搜尋表格內容嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！