欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于JavaScript實現(xiàn)可搜索的表格

 更新時間：2024年01月22日 14:00:03   作者：刻刻帝的海角  
在Web開發(fā)中,數(shù)據(jù)表格是常見的數(shù)據(jù)展示形式,這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript來實現(xiàn)這個功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

一、引言

在Web開發(fā)中，數(shù)據(jù)表格是常見的數(shù)據(jù)展示形式。然而，傳統(tǒng)的表格功能有限，不能很好地滿足現(xiàn)代用戶的需求。一個常見的需求是讓用戶能夠搜索表格中的數(shù)據(jù)。下面，我將向您展示如何使用JavaScript來實現(xiàn)這個功能。

二、實現(xiàn)步驟

創(chuàng)建HTML表格

首先，我們需要創(chuàng)建一個HTML表格。這個表格將包含一些數(shù)據(jù)，以便我們可以在JavaScript中操作它。以下是一個簡單的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>  
    <!-- 更多行... -->  
  </tbody>  
</table>

創(chuàng)建搜索框和按鈕

接下來，我們需要創(chuàng)建一個搜索框和一個按鈕，以便用戶可以搜索表格中的數(shù)據(jù)。以下是一個簡單的HTML搜索框和按鈕示例：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..">  
<button onclick="myFunction()">搜索</button>

CSS (可選，用于美化搜索建議)

#suggestionsContainer {  
  position: absolute;  
  background-color: white;  
  border: 1px solid #ccc;  
  z-index: 1000;  
  width: 200px;  
  max-height: 200px;  
  overflow-y: auto;  
}  
  
#suggestionsContainer div {  
  padding: 5px;  
  cursor: pointer;  
}  
  
#suggestionsContainer div:hover {  
  background-color: #eee;  
}

編寫JavaScript代碼實現(xiàn)搜索功能

function myFunction() {  
  // 獲取輸入框的值和表格元素  
  var input, filter, table, tr, td, i, txtValue;  
  input = document.getElementById("myInput");  
  filter = input.value.toUpperCase(); // 將輸入值轉(zhuǎn)換為大寫字母，以便進(jìn)行不區(qū)分大小寫的搜索  
  table = document.getElementById("myTable");  
  tr = table.getElementsByTagName("tr"); // 獲取表格中的所有行元素  
  // 遍歷表格中的每一行，并檢查是否包含輸入值  
  for (i = 0; i < tr.length; i++) {  
    td = tr[i].getElementsByTagName("td")[0]; // 獲取當(dāng)前行的第一個單元格元素（即姓名單元格）  
    if (td) { // 如果單元格存在，則進(jìn)行下一步操作（防止空行）  
      txtValue = td.textContent || td.innerText; // 獲取單元格的文本內(nèi)容，以便進(jìn)行比較操作  
      if (txtValue.toUpperCase().indexOf(filter) > -1) { // 如果單元格文本中包含輸入值，則顯示該行，否則隱藏該行  
        tr[i].style.display = ""; // 顯示行元素（將display屬性設(shè)置為空字符串）  
      } else { // 如果單元格文本中不包含輸入值，則隱藏該行（將display屬性設(shè)置為"none"）  
        tr[i].style.display = "none"; // 隱藏行元素（將display屬性設(shè)置為"none"）  
      }  
    }         
  }     
}

要在JavaScript中實現(xiàn)一個搜索框，你可以創(chuàng)建一個HTML輸入元素，然后使用JavaScript監(jiān)聽該輸入元素的input事件。當(dāng)用戶在搜索框中輸入時，input事件會被觸發(fā)，然后你可以根據(jù)用戶的輸入來執(zhí)行你想要的操作。

下面是一個簡單的例子，當(dāng)用戶在搜索框中輸入時，會觸發(fā)一個函數(shù)來過濾一個數(shù)組并顯示匹配的項：

HTML:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..">  
<ul id="myList">  
  <li>蘋果</li>  
  <li>香蕉</li>  
  <li>橙子</li>  
  <li>葡萄</li>  
</ul>

JavaScript:

function myFunction() {  
  // 獲取輸入框的值和列表元素  
  var input, filter, list, i, txtValue, li, found;  
  input = document.getElementById("myInput");  
  filter = input.value.toUpperCase(); // 將輸入值轉(zhuǎn)換為大寫字母，以便進(jìn)行不區(qū)分大小寫的搜索  
  list = document.getElementById("myList");  
  found = []; // 創(chuàng)建一個空數(shù)組來存儲匹配的項  
  // 遍歷列表中的每一項，并檢查是否包含輸入值  
  for (i = 0; i < list.children.length; i++) {  
    li = list.children[i];  
    txtValue = li.textContent || li.innerText; // 獲取列表項的文本內(nèi)容，以便進(jìn)行比較操作  
    if (txtValue.toUpperCase().indexOf(filter) > -1) { // 如果列表項文本中包含輸入值，則將該項添加到匹配數(shù)組中  
      found.push(li); // 將匹配的項添加到數(shù)組中  
    }         
  }     
  // 將匹配的項添加到列表中（顯示它們）  
  for (i = 0; i < found.length; i++) {  
    list.appendChild(found[i]); // 將匹配的項添加回列表中（顯示它們）  
  }         
}

如果你需要一個更復(fù)雜的搜索框，可以考慮添加一些高級功能，比如搜索建議（autocomplete）、搜索高亮、延遲搜索（debounce）以減少不必要的處理、從遠(yuǎn)程數(shù)據(jù)源獲取數(shù)據(jù)等。

下面是一個例子，展示了如何結(jié)合搜索建議和從模擬的遠(yuǎn)程數(shù)據(jù)源獲取數(shù)據(jù)來實現(xiàn)一個復(fù)雜的搜索框。

HTML:

<input type="text" id="searchInput" placeholder="搜索...">  
<div id="suggestionsContainer"></div>

 CSS (可選，用于美化搜索建議):

#suggestionsContainer {  
  position: absolute;  
  background-color: white;  
  border: 1px solid #ccc;  
  z-index: 1000;  
  width: 200px;  
  max-height: 200px;  
  overflow-y: auto;  
}  
  
#suggestionsContainer div {  
  padding: 5px;  
  cursor: pointer;  
}  
  
#suggestionsContainer div:hover {  
  background-color: #eee;  
}

JavaScript:

// 模擬遠(yuǎn)程數(shù)據(jù)源  
const remoteData = [  
  'Apple',  
  'Banana',  
  'Cherry',  
  'Date',  
  'Elderberry',  
  'Fig',  
  'Grape',  
  'Honeydew',  
  'Icaco',  
  'Jackfruit'  
];  
  
// 獲取搜索框和建議容器元素  
const searchInput = document.getElementById('searchInput');  
const suggestionsContainer = document.getElementById('suggestionsContainer');  
  
// 顯示搜索建議的函數(shù)  
function showSuggestions(query, suggestions) {  
  suggestionsContainer.innerHTML = '';  
  query = query.toUpperCase();  
  suggestions.forEach(suggestion => {  
    const suggestionUpper = suggestion.toUpperCase();  
    if (suggestionUpper.startsWith(query)) {  
      const suggestionElement = document.createElement('div');  
      suggestionElement.textContent = suggestion;  
      suggestionElement.addEventListener('click', () => {  
        searchInput.value = suggestion;  
        suggestionsContainer.style.display = 'none';  
      });  
      suggestionsContainer.appendChild(suggestionElement);  
    }  
  });  
  if (suggestionsContainer.children.length > 0) {  
    suggestionsContainer.style.display = 'block';  
  } else {  
    suggestionsContainer.style.display = 'none';  
  }  
}  
  
// 從遠(yuǎn)程數(shù)據(jù)源獲取搜索建議（模擬）  
function getRemoteSuggestions(query, callback) {  
  // 假設(shè)這里有一個異步操作，比如Ajax調(diào)用  
  setTimeout(() => {  
    // 過濾出包含查詢字符串的建議  
    const filteredSuggestions = remoteData.filter(item =>  
      item.toUpperCase().startsWith(query.toUpperCase())  
    );  
    // 調(diào)用回調(diào)函數(shù)返回建議  
    callback(filteredSuggestions);  
  }, 500); // 延遲500毫秒模擬網(wǎng)絡(luò)請求  
}  
  
// 監(jiān)聽搜索框的輸入事件  
searchInput.addEventListener('input', function() {  
  const query = this.value.trim();  
  // 清空建議容器  
  suggestionsContainer.innerHTML = '';  
  // 如果查詢字符串不為空，則從遠(yuǎn)程數(shù)據(jù)源獲取建議  
  if (query !== '') {  
    getRemoteSuggestions(query, showSuggestions);  
  } else {  
    suggestionsContainer.style.display = 'none';  
  }  
});  
  
// 監(jiān)聽搜索框外的點擊事件，隱藏建議容器  
document.addEventListener('click', function(event) {  
  if (!searchInput.contains(event.target) && !suggestionsContainer.contains(event.target)) {  
    suggestionsContainer.style.display = 'none';  
  }  
});

這個例子中，我們創(chuàng)建了一個搜索框和一個建議容器。當(dāng)用戶在搜索框中輸入時，我們會模擬一個異步請求來從遠(yuǎn)程數(shù)據(jù)源獲取匹配的建議，并在建議容器中顯示出來。用戶可以直接從建議容器中選擇一個建議，此時搜索框的值會被更新，建議容器會被隱藏。此外，我們還添加了一個事件監(jiān)聽器來隱藏建議容器，當(dāng)用戶點擊搜索框外的任何地方時，建議容器會被隱藏。

請注意，這個例子中的getRemoteSuggestions函數(shù)使用了setTimeout來模擬異步操作，實際應(yīng)用中你可能會使用fetch或XMLHttpRequest來從服務(wù)器獲取數(shù)據(jù)。此外，這個例子中的搜索建議是基于字符串的前綴匹配，你可以根據(jù)需要修改匹配邏輯。

到此這篇關(guān)于基于JavaScript實現(xiàn)可搜索的表格的文章就介紹到這了,更多相關(guān)JavaScript可搜索表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論