let el = (dom)=>document.querySelector(dom)是什么意思
时间: 2023-05-12 12:03:29 浏览: 157
这是一个 JavaScript 函数,接受一个参数 dom,返回一个 DOM 元素。具体来说,它使用 document.querySelector 方法查找符合指定 CSS 选择器的第一个元素,并将其返回。
相关问题
``` <%@ page language="java" import="test_package.*" import="java.util.*" import="java.sql.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../style/certificate.css"> </head> <body> <% List<test_information> list = (List<test_information>)session.getAttribute("date"); %> <div class = "tit">查看凭证</div> <div class = "Ribbon"> <table> <tr> <td style="white-space: nowrap;"> <!-- 按钮1 --> <input type="button" value="传统记账" class="R_button"> <!-- 表单2 - 导出 --> <form action="" class="inline-form"> <input type="submit" value="导出" class="R_button"> </form> <!-- 表单3 - 打印 --> <form id="printForm" action="white.jsp" method="post" class="inline-form"> <input type="hidden" id="selectedTelsHiddenField" name="telsToPrint"> <input type="submit" value="打印" onclick="return submitSelectedTels();" class="R_button"> </form> <!-- 按钮4 --> <input type="button" value="模板" onclick="template.show()" class="R_button"> </td> <td> <input type = "text" name = "search_name"> <input type = "button" value = "搜索"> </td> </tr> </table> </div> <div class="body"> <table class="cer" > <% for(test_information news:list) { %> <!-- 将每条记录分为两列展示 --> <tr> <td class="zero_box"> <input type="checkbox" name="selectedTels" value="<%=news.getTel()%>" onchange="updateSelection(this)" style = "zoom : 300%"> </td> <td class="first_box"> <%= news.getMaterial() %> <br/> <%= news.getStart_time() %> </td> <td class="second_box"> <%= news.getWashing_method() %> <br/> <%= news.getPrice() %> </td> <td class="third_box"> <form action =""> <input name = "id" value ="<%=news.getTel() %>" type = "hidden"> <input type ="submit" class = "func_button" value = "税费" ><br> <input type ="submit" class = "func_button" value = "查看凭证" ><br> <input type ="submit" class = "func_button" value = "删除凭证" > </form> <br/> </td> </tr> <% } %> </table> <div style="display:none;" id="printArea"></div> </div> <script> let selectedTelsArray = []; function updateSelection(el) { if (el.checked && !selectedTelsArray.includes(el.value)) { // 如果当前被选中,则加入集合 selectedTelsArray.push(el.value); } else { // 否则移除该元素 const indexToRemove = selectedTelsArray.indexOf(el.value); if (indexToRemove !== -1) { selectedTelsArray.splice(indexToRemove, 1); } } console.log(selectedTelsArray); // 输出调试信息 } // 提交之前设置 hidden field 的值 function submitSelectedTels() { document.getElementById('selectedTelsHiddenField').value = JSON.stringify(selectedTelsArray); return true; } </script> </body> </html>```对表格实现模糊搜索功能,搜索的字段为材质,当输入为空时显示整个表格,点击搜索按钮后进行搜索
要在上述代码基础上实现“模糊搜索”功能,并针对 材质
字段进行筛选,可以按照以下步骤操作:
实现思路
- HTML部分:保留现有的文本框和按钮作为输入区域。
- JavaScript部分:
- 监听用户点击“搜索”按钮的操作。
- 获取用户输入的关键字并将其用于匹配表格中的内容。
- 遍历表格的每一行,检查是否包含符合条件的内容(即材质字段),如果不符合条件,则隐藏该行;反之则显示。
以下是修改后的完整代码示例:
<script>
function performSearch() {
// 获取搜索关键字
let searchInput = document.getElementsByName("search_name")[0].value.trim().toLowerCase();
// 获取所有的表格行数据
let rows = document.querySelectorAll(".cer tr");
rows.forEach(row => {
// 默认不显示这一行
row.style.display = "none";
// 取得当前行的材质单元格
let materialCell = row.querySelector(".first_box").innerText.toLowerCase();
// 如果输入为空 或者 材质包含关键字,则显示这一行
if (!searchInput || materialCell.includes(searchInput)) {
row.style.display = "";
}
});
}
</script>
<!-- 修改搜索按钮的功能 -->
<input type="button" value="搜索" onclick="performSearch()">
具体改动点说明
1. HTML部分调整
- 确保表单中的
<input>
文本框命名为"search_name"
,以便 JavaScript 能够轻松获取到它的值。 - 给原有的“搜索”按钮绑定一个
onclick
函数触发事件处理程序——这里是performSearch()
。
2. 核心逻辑解析 (performSearch
)
- 使用
.trim()
清理用户输入两侧多余的空格。 - 将所有查询结果转成小写字母统一比较规则。
- 利用 DOM API 查询每个表格项对应的
material
内容,并判断它是否包括目标字符串。 - 对于符合要求的数据保持可见状态 (
row.style.display = ""
) ,其他数据暂时设为不可见(row.style.display = "none"
)。
示例效果演示
假设原始表格中有几条记录分别对应不同材料名称如:“钢铁”, “木头”, 和“塑料”。那么,
- 输入关键词 "钢" 并按【搜索】键,只有含‘钢铁’的相关一行会呈现出来;
- 若清空了查找栏再按下【搜索】按键的话,将恢复至最初完整的列表视图展现全部项目。
注意事项
- 此解决方案仅适用于小型应用场合下的前端过滤需求,在大型系统或需跨页面检索场景下建议采用服务端分页加高级筛选的方式提高性能。
- 当涉及敏感信息传输时务必注意加密保护措施以免泄露重要资料。
<div class="echarts-box''> <el-select class="echarts-select"></el-select><div id="charts":style="{width:'100%'}"></div> </div>
这段HTML代码描述了一个包含ECharts图表组件的布局。<div class="echarts-box">
表示一个用于包裹ECharts图表的容器,可能是响应式设计的一部分。<el-select class="echarts-select">
是一个Element UI库中的下拉选择框,可能用于切换图表数据或配置选项。
<div id="charts" style="{width:'100%'}">
是图表展示区域,id为"charts",宽度设置为100%,意味着它会占据其容器的整个宽度,适合动态生成的图表内容。ECharts是一个流行的JavaScript可视化库,常用于创建交互式的图表。
要在这个结构中创建ECharts图表,需要配合JavaScript代码来初始化图表、加载数据并处理用户的选择。例如:
// 获取DOM元素
const select = document.querySelector('.echarts-select');
const chartsDiv = document.getElementById('charts');
// ECharts实例化
let myChart;
function createChart(chartType) {
if (myChart) {
myChart.dispose(); // 清理旧的图表
}
myChart = echarts.init(chartsDiv);
switch (chartType) {
case 'line':
myChart.setOption({
// 线图配置...
});
break;
case 'bar':
myChart.setOption({
// 柱状图配置...
});
break;
// 更多图表类型...
}
}
select.addEventListener('change', function() {
const selectedType = this.value; // 获取选中的图表类型
createChart(selectedType);
});
相关推荐

















