table表多项条件筛选

最新推荐文章于 2025-09-09 17:36:55 发布

原创最新推荐文章于 2025-09-09 17:36:55 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table 多项条件筛选 select

这篇博客介绍了如何使用HTML和JavaScript实现一个表格的多项条件筛选功能。内容包括输入框、下拉选择和日期选择等元素，允许用户根据UM账号、部门名称、请求系统名称及时间范围进行数据过滤，并提供了导出Excel的功能。

<table class="am-table am-table-striped am-table-hover table-main" id="table1">

<span class="hhh"><label for="">UM账号:   </label>

<input type="text" name="UM" id="UM" value="${mockSearchCondition.UM?default('')}"></span>

<span class="hhh"><label for="">部门名称:  </label>

<span class="am-form-group">

<select data-am-selected="{btnSize: 'sm'}" id="groupName" name="groupName">

<option value="all">查询所有</option>

<#if groupNameList?exists>

<#list groupNameList as groupName>

<#if groupName=="${mockSearchCondition.groupName?default('')}">

<option value="${groupName}" selected>${groupName}</option>

<#else>

<option value="${groupName}" >${groupName}</option>

</#if>

</#list>

</#if>

</select>

</span>

</span>

<span class="hhh"><label for="">请求系统名称:   </label>

<input type="text" name="requestSystem"id="requestSystem" value="${mockSearchCondition.requestSystem?default('')}">

</span>

<span class="hhh">

<label for="">开始时间:  </label>

<input type="Date" name="beginTime" placeholder="时间" id="beginTime" value="${mockSearchCondition.beginTime?default('')}">

</span>

<span class="hhh">

<label for="">截止时间:  </label>

<input type="Date" name="endTime" placeholder="时间" id="endTime" value="${mockSearchCondition.endTime?default('')}">

</span>

<span>

<button type="button" class="am-btn am-btn-primary am-btn-xs" onclick="goPage(1)" >搜索</button>



</span>

<a onclick="javascript:exportExcel();" class="am-btn am-btn-primary am-btn-xs">导出</a>

</table>