Using JavaScript to implement table filtering function
Use JavaScript to implement table filtering function
With the continuous development of Internet technology, tables have become a common way to display data on web pages. However, when the amount of data is huge, users often face difficulties in finding specific data. Therefore, adding filtering functions to tables so that users can quickly find the required data has become a requirement for many web designs. This article will introduce how to use JavaScript to implement table filtering function.
First, we need to have a form of data. The following is a simple example:
<table id="data-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>男</td>
<td>广州</td>
</tr>
</tbody>
</table>Next, we need an input box for users to enter filter conditions. Use the following code to add an input box:
<input type="text" id="filter-input" placeholder="输入筛选条件">
Then, we need to write JavaScript code to implement the filtering function of the table. The code is as follows:
// 获取数据表格和筛选输入框
const table = document.querySelector('#data-table');
const filterInput = document.querySelector('#filter-input');
// 监听筛选输入框的输入事件
filterInput.addEventListener('input', () => {
const filterValue = filterInput.value.toLowerCase(); // 获取输入框的值并转为小写
// 获取表格中的所有行
const rows = table.getElementsByTagName('tr');
// 遍历表格中的每一行，并根据筛选条件显示/隐藏行
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
const dataCells = row.getElementsByTagName('td');
let shouldShowRow = false;
// 遍历当前行的每个单元格，检查是否有匹配的值
for (let j = 0; j < dataCells.length; j++) {
const cell = dataCells[j];
const cellValue = cell.textContent.toLowerCase();
// 如果单元格的值与筛选条件匹配，显示该行
if (cellValue.includes(filterValue)) {
shouldShowRow = true;
}
}
// 根据shouldShowRow的值，显示/隐藏行
if (shouldShowRow) {
row.style.display = '';
} else {
row.style.display = 'none';
}
}
});Now, when the user enters filter conditions in the input box, the table will show/hide the corresponding rows based on the conditions.
This article introduces how to use JavaScript to implement table filtering function. By adding filter input boxes and writing corresponding JavaScript code, we can make it easy for users to find specific data in the table. This has great practical value for data display and query of large tables. Hope this article helps you!
The above is the detailed content of Using JavaScript to implement table filtering function. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Steps to adjust the format of pictures inserted in PPT tables
Mar 26, 2024 pm 04:16 PM
1. Create a new PPT file and name it [PPT Tips] as an example. 2. Double-click [PPT Tips] to open the PPT file. 3. Insert a table with two rows and two columns as an example. 4. Double-click on the border of the table, and the [Design] option will appear on the upper toolbar. 5. Click the [Shading] option and click [Picture]. 6. Click [Picture] to pop up the fill options dialog box with the picture as the background. 7. Find the tray you want to insert in the directory and click OK to insert the picture. 8. Right-click on the table box to bring up the settings dialog box. 9. Click [Format Cells] and check [Tile images as shading]. 10. Set [Center], [Mirror] and other functions you need, and click OK. Note: The default is for pictures to be filled in the table
How to filter more than 3 keywords at the same time in excel
Mar 21, 2024 pm 03:16 PM
Excel is often used to process data in daily office work, and it is often necessary to use the "filter" function. When we choose to perform "filtering" in Excel, we can only filter up to two conditions for the same column. So, do you know how to filter more than 3 keywords at the same time in Excel? Next, let me demonstrate it to you. The first method is to gradually add the conditions to the filter. If you want to filter out three qualifying details at the same time, you first need to filter out one of them step by step. At the beginning, you can first filter out employees with the surname "Wang" based on the conditions. Then click [OK], and then check [Add current selection to filter] in the filter results. The steps are as follows. Similarly, perform filtering separately again
What should I do if there is data in the Excel table but the blanks are filtered?
Mar 13, 2024 pm 06:38 PM
Excel is a frequently used office software. Many users record various data in the table, but the table clearly contains data and is blank when filtering. Regarding this problem, many users don’t know how to solve it. It doesn’t matter. , the content of this software tutorial is to provide answers to the majority of users. Users in need are welcome to check out the solutions. What should I do if there is data in the Excel table but the blanks are filtered? The first reason is that the table contains blank rows. We want to filter all people with the surname "Li", but we can see that the correct results are not filtered out because the table contains blank rows. How to deal with this situation? Solution: Step 1: Select all content and then filter. Press c
How to use Excel filter function with multiple conditions
Feb 26, 2024 am 10:19 AM
If you need to know how to use filtering with multiple criteria in Excel, the following tutorial will guide you through the steps to ensure you can filter and sort your data effectively. Excel's filtering function is very powerful and can help you extract the information you need from large amounts of data. This function can filter data according to the conditions you set and display only the parts that meet the conditions, making data management more efficient. By using the filter function, you can quickly find target data, saving time in finding and organizing data. This function can not only be applied to simple data lists, but can also be filtered based on multiple conditions to help you locate the information you need more accurately. Overall, Excel’s filtering function is a very practical
How to make a table for sales forecast
Mar 20, 2024 pm 03:06 PM
Being able to skillfully make forms is not only a necessary skill for accounting, human resources, and finance. For many sales staff, learning to make forms is also very important. Because the data related to sales is very large and complex, and it cannot be simply recorded in a document to explain the problem. In order to enable more sales staff to be proficient in using Excel to make tables, the editor will introduce the table making issues about sales forecasting. Friends in need should not miss it! 1. Open [Sales Forecast and Target Setting], xlsm, to analyze the data stored in each table. 2. Create a new [Blank Worksheet], select [Cell], and enter [Label Information]. [Drag] downward and [Fill] the month. Enter [Other] data and click [
How to set WPS value to automatically change color according to conditions_Steps to set WPS table value to automatically change color according to condition
Mar 27, 2024 pm 07:30 PM
1. Open the worksheet and find the [Start]-[Conditional Formatting] button. 2. Click Column Selection and select the column to which conditional formatting will be added. 3. Click the [Conditional Formatting] button to bring up the option menu. 4. Select [Highlight conditional rules]-[Between]. 5. Fill in the rules: 20, 24, dark green text with dark fill color. 6. After confirmation, the data in the selected column will be colored with corresponding numbers, text, and cell boxes according to the settings. 7. Conditional rules without conflicts can be added repeatedly, but for conflicting rules WPS will replace the previously established conditional rules with the last added rule. 8. Repeatedly add the cell columns after [Between] rules 20-24 and [Less than] 20. 9. If you need to change the rules, you can just clear the rules and then reset the rules.
Do you know how to sum a Word table?
Mar 21, 2024 pm 01:10 PM
Sometimes, we often encounter counting problems in Word tables. Generally, when encountering such problems, most students will copy the Word table to Excel for calculation; some students will silently pick up the calculator. Calculate. Is there a quick way to calculate it? Of course there is, in fact the sum can also be calculated in Word. So, do you know how to do it? Today, let’s take a look together! Without further ado, friends in need should quickly collect it! Step details: 1. First, we open the Word software on the computer and open the document that needs to be processed. (As shown in the picture) 2. Next, we position the cursor on the cell where the summed value is located (as shown in the picture); then, we click [Menu Bar
What are the tips for novices to create forms?
Mar 21, 2024 am 09:11 AM
We often create and edit tables in excel, but as a novice who has just come into contact with the software, how to use excel to create tables is not as easy as it is for us. Below, we will conduct some drills on some steps of table creation that novices, that is, beginners, need to master. We hope it will be helpful to those in need. A sample form for beginners is shown below: Let’s see how to complete it! 1. There are two methods to create a new excel document. You can right-click the mouse on a blank location on the [Desktop] - [New] - [xls] file. You can also [Start]-[All Programs]-[Microsoft Office]-[Microsoft Excel 20**] 2. Double-click our new ex
