js原生的html表格的搜索,排序,分页

制作一个html表格。需要做成响应式。
表头为 序号,姓名,年龄。每一列需要 “排序和搜索” 两个功能
填写搜索后文字后只显示当前列的所有包含关键字的记录。搜索字段清空后显示所有记录。
当第一个搜索填写后再填写其他字段的搜索关键字时,第一个搜索自动清空。
不同字段的排序功能是,互相不做影响,即第一个字段排序后,第二个字段再排序时,将重置第一个字段的排序为默认升序,搜索功能也是这样。
不同字段的排序和搜索功能可以叠加,即在搜索出一些记录后,再点排序,需要在当前搜索记录内进行排序。
考点:
js table综合应用。
删除线格式

JS搜索筛选table列:
				function onSearch(obj,cols) { //js函数开始
					setTimeout(function() { //因为是即时查询,需要用setTimeout进行延迟,让值写入到input内,再读取
						var storeId = document.getElementById('store'); //获取table的id标识
						var rowsLength = storeId.rows.length; //表格总共有多少行
						var key = obj.value; //获取输入框的值
						var searchCol = cols; //要搜索的哪一列,这里是第一列,从0开始数起
						for(var i = 1; i < rowsLength-2; i++) { //按表的行数进行循环,本例第一行是标题,所以i=1,从第二行开始筛选(从0数起)
							var searchText = stor
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值