// 关键词搜索功能----立即函数 (function (element, search_key) { let table = document.getElementById('table-content'); // 获取表格 function in_array_item (item, array) { for (var i = 0; i < array.length; i++) { if (array[i].indexOf(item) != -1) { return true; } } return false; } function response () { let hiddenStudentsNumber = 0; // 获取隐藏的学生个数(即表格隐藏行数) // 获取要搜索的关键词 const search_content = document.getElementById(search_key).value; // console.log(search_content); // console.log(typeof(search_content)); let data = []; // 遍历列表将数据存储到一个数组中 // 1.获取表格行数 for (let i = 0; i < table.children.length; i++) { // 2.获取表格列数 for (let j = 0; j < table.children[i].children.length; j++) { if (!data[i]) { // 在数组中创键每一行内容存放的数组，用于存放一行数据 data[i] = new Array(); } data[i][j] = table.children[i].children[j].innerHTML.toString(); // 3.存放数据 if (data[i][j] === '♂') { data[i][j] = '男'; } if (data[i][j] === '♀') { data[i][j] = '女'; } } // console.log(data[i]); if (search_content == '') { table.children[i].style.display = ''; } else { if (in_array_item(search_content, data[i])) { table.children[i].style.display = ''; } else { table.children[i].style.display = 'none'; hiddenStudentsNumber += 1; } } } console.log(hiddenStudentsNumber); let str = "共有" + (table.children.length - hiddenStudentsNumber) + "名学生"; document.getElementById('students_number').innerHTML = str; } const searchButton = document.getElementById(element); searchButton.addEventListener('click', function () { response(); }); document.addEventListener('keydown', function (event) { if (event.keyCode === 13) { response(); } }); let str = "共有" + table.children.length + "名学生"; document.getElementById('students_number').innerHTML = str; })('search', 'search-key');
同时在原有的学生信息页面HTML添加：