首頁 > web前端 > 前端問答 > jquery查詢table中位數

jquery查詢table中位數

王林
發布: 2023-05-14 11:34:38
原創
827 人瀏覽過

在網頁開發中,表格(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數組中,這樣就得到了一個二維數組,其中每個子數組代表表格中的一行資料。

  1. 查詢表格中的資料

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

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()方法將其轉換為整數類型進行比較。如果符合條件,顯示該行數據,否則隱藏該行數據。

  1. 總結

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板