如何使用 JavaScript 实现一个简单的表格过滤功能? - 项越资源网-html css js 用法分享社区-开发交流-项越资源网

如何使用 JavaScript 实现一个简单的表格过滤功能?

可以在页面上使用 JavaScript 实现表格过滤功能。示例代码如下:

// 过滤后的 Row 将会被显示在 table 中
let filterRows = (table, query) => {
    
    // 从 table 中获取每一个 row
    let rows = table.querySelectorAll('tr');

    // 遍历每一个 row
    for (let row of rows) {
        let hasMatch = false;

        // 从 row 中获取每一个 cell
        let cells = row.querySelectorAll('td');
        
        // 遍历每一个 cell
        for (let cell of cells) {
            let text = cell.textContent;

            if (text.includes(query)) {
                // 找到匹配
                hasMatch = true;
                break;
            }
        }

        // 显示或者隐藏 row
        if (hasMatch) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    }
}

调用的方式:

let table = document.querySelector('#my-table');
let query = window.prompt('请输入要过滤的字符串');
filterRows(table, query);

除了上面的过滤方式,还可以使用 DOM 或者第三方库来实现表格过滤功能。

请登录后发表评论

    没有回复内容