jquery查詢table中位數

在網頁開發中，表格(table)是常見且重要的元素，如何對表格資料進行查詢和篩選是一個常見的需求。 jQuery是一個非常強大的JavaScript函式庫，提供了豐富的選擇器和DOM操作方法，本文將介紹使用jQuery查詢表格中的值。

1. 取得表格中的資料

要想查詢表格中的值，首先需要取得表格的資料。使用jQuery可以很方便地取得表格中的資料。

HTML程式碼如下：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>London</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>20</td>
      <td>Paris</td>
    </tr>
  </tbody>
</table>

使用jQuery取得表格資料的程式碼如下：

var tableData = [];
$("#myTable tbody tr").each(function() {
  var rowData = [];
  $(this).find("td").each(function() {
    rowData.push($(this).text());
  });
  tableData.push(rowData);
});
console.log(tableData);

解析程式碼：先定義一個空數組tableData，然後使用each()方法遍歷表格中的每一行(tr)，對於每一行再使用find()方法遍歷該行中的每一個單元格(td)，並將單元格中的文字內容加入rowData數組。最後將rowData數組加入到tableData數組中，這樣就得到了一個二維數組，其中每個子數組代表表格中的一行資料。

2. 查詢表格中的資料

查詢表格中的資料通常包括兩個面向：按行查詢和按列查詢。以下將詳細介紹這兩種查詢方式。

2.1 按行查詢

按行查詢是指根據表格中某一列的值來查詢該行資料。例如，在上面的表格中，希望查詢所有在"London"居住的人的信息。

HTML程式碼如下：

<input type="text" id="searchInput">
<button id="searchBtn">Search</button>
<table id="myTable">
  <!-- 同上 -->
</table>

使用jQuery按行查詢的程式碼如下：

$("#searchBtn").click(function() {
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var found = false;
    $(this).each(function() {
      if ($(this).text().toLowerCase().indexOf(searchText) >= 0) {
        found = true;
        return false;
      }
    });
    if (found) $(this).show();
    else $(this).hide();
  });
});

解析程式碼：首先取得用於搜尋的文字方塊的值，將其轉換為小寫字母，方便後續比較。然後遍歷表格中每一行，再遍歷每個儲存格，判斷儲存格中的值是否包含搜尋文字方塊中的關鍵字。如果找到了，請將該行顯示出來，否則將該行隱藏。

2.2 按列查詢

按列查詢是指根據表格中某一行的值來查詢該列資料。例如，在上面的表格中，希望查詢所有年齡大於25歲的人的資訊。

HTML程式碼同上。

使用jQuery按列查詢的程式碼如下：

$("#searchBtn").click(function() {
  var columnIndex = 1; //查询年龄这一列
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var tdValue = $(this).find("td:eq(" + columnIndex + ")").text();
    if (parseInt(tdValue) > parseInt(searchText)) $(this).show();
    else $(this).hide();
  });
});

解析程式碼：先定義需要查詢的列的索引(columnIndex)為1，即年齡列。然後取得搜尋文字方塊的值，同樣轉換為小寫字母。遍歷表格中的每一行，透過eq()方法取得每一行中對應列的值，透過parseInt()方法將其轉換為整數類型進行比較。如果符合條件，顯示該行數據，否則隱藏該行數據。

3. 總結

本文介紹了使用jQuery查詢表格中的數據，包括按行查詢和按列查詢。透過jQuery的選擇器和DOM操作方法，可以很方便地對表格資料進行查詢和篩選。需要注意的是，表格資料量較大時，查詢效能可能會受到影響，需要選擇合適的方案來提高查詢效率。

以上是jquery查詢table中位數的詳細內容。更多資訊請關注PHP中文網其他相關文章！