用v8平台的代码实现一个简单页面,有一个表格(表格数据自定义)、一个搜索框、一个按钮,要求:在搜索框中输入关键字,点击按钮可以筛选出表格中某一列含有关键字的对应数据。
时间: 2024-04-12 08:30:10 浏览: 21
以下是一个使用V8平台的JavaScript代码示例,实现了您所描述的简单页面:
```javascript
// 创建一个包含表格数据的数组
var tableData = [
{ name: "John Doe", age: 25, occupation: "Developer" },
{ name: "Jane Smith", age: 30, occupation: "Designer" },
{ name: "Bob Johnson", age: 35, occupation: "Manager" },
{ name: "Alice Williams", age: 28, occupation: "Engineer" }
];
// 获取页面元素
var searchInput = document.getElementById("searchInput");
var searchButton = document.getElementById("searchButton");
var tableBody = document.getElementById("tableBody");
// 点击按钮时触发筛选逻辑
searchButton.addEventListener("click", function() {
var keyword = searchInput.value.toLowerCase(); // 获取搜索关键字并转换为小写
// 清空表格内容
tableBody.innerHTML = "";
// 遍历表格数据进行筛选
tableData.forEach(function(row) {
// 遍历每一行的值,检查是否包含关键字
for (var key in row) {
if (row.hasOwnProperty(key) && row[key].toString().toLowerCase().includes(keyword)) {
// 创建新的表格行和单元格
var newRow = document.createElement("tr");
var nameCell = document.createElement("td");
var ageCell = document.createElement("td");
var occupationCell = document.createElement("td");
// 填充单元格内容
nameCell.textContent = row.name;
ageCell.textContent = row.age;
occupationCell.textContent = row.occupation;
// 将单元格添加到行中
newRow.appendChild(nameCell);
newRow.appendChild(ageCell);
newRow.appendChild(occupationCell);
// 将行添加到表格中
tableBody.appendChild(newRow);
// 匹配到一条数据后就跳出循环
break;
}
}
});
});
```
请注意,上述代码假设您的HTML页面中已经定义了具有相应ID的搜索框、按钮和表格元素。您需要在HTML文件中添加相应的标记,并将代码放在`<script>`标签中。此外,您可以根据自己的需求进行样式和布局的调整。
希望这能帮助到您!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)