Mr.J--Javascript表格创建模糊搜索关键词搜索

本文章主要是了解js制作表格，不过现在前端一般都是用div+CSS布局，所以有兴趣的可以了解一下这种思想。在我们现实生活中表格是非常普遍的，也是非常好用的，现在我们有Excel,Word，WPS也可以来制作表格。（为什么说table表格布局不好？）

制作表格：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><!--作者：2538808265@qq.com时间：2018-08-23-->
<body>
<table id="tab1" border="1" width="500"><thead><td>ID</td><td>姓名</td><td>年龄</td></thead><tbody><tr><td>1</td><td>Blue</td><td>27</td></tr><tr><td>2</td><td>张三</td><td>23</td></tr><tr><td>3</td><td>李四</td><td>28</td></tr><tr><td>4</td><td>王五</td><td>25</td></tr><tr><td>5</td><td>张伟</td><td>24</td></tr></tbody>
</table>
</body>
</html>

表格变色以及高亮（此代码加入script模块）：

<script>window.onload = function(){var oTab = document.getElementById('tab1');var oldColor = '';  //事先存储一个颜色//alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML); //查询某数据//alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);//  与上面的功能一样for(var i=0;i<oTab.tBodies[0].rows.length;i++){oTab.tBodies[0].rows[i].onmouseover = function()  //鼠标移入{oldColor = this.style.background;this.style.background = 'blue';};oTab.tBodies[0].rows[i].onmouseout = function()  //鼠标移出{this.style.background = oldColor;};//高亮if(i%2){oTab.tBodies[0].rows[i].style.background = "orange";}else{oTab.tBodies[0].rows[i].style.background = "pink";}}};</script>

表格添加以及删除（先在HTML模块中加入属性）：

Name: <input id = "name" type = "text" />Age: <input id = "age" type = "text" /><input id = "btn1"type="button" value="添加" />

表格添加以及删除（Javascript模块）：

<script>window.onload = function(){var oTab = document.getElementById('tab1');var oBtn = document.getElementById('btn1');var oName = document.getElementById('name');var oAge = document.getElementById('age');var id = oTab.tBodies[0].rows.length+1;oBtn.onclick = function(){//创建元素列表var oTr = document.createElement('tr');var oTd = document.createElement('td');oTd.innerHTML = id++;oTr.appendChild(oTd);var oTd = document.createElement('td');oTd.innerHTML = oName.value;oTr.appendChild(oTd);var oTd = document.createElement('td');oTd.innerHTML = oAge.value;oTr.appendChild(oTd);var oTd = document.createElement('td');oTd.innerHTML = '<a href= "javascript:;">Delete</a>';oTr.appendChild(oTd);oTd.getElementsByTagName('a')[0].onclick=function (){oTab.tBodies[0].removeChild(this.parentNode.parentNode);};oTab.tBodies[0].appendChild(oTr);};};</script>

添加运行结果：

删除之后ID不可能重复出现：

表格搜索（模糊搜索关键词搜索功能）完整代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>window.onload = function(){var oTab = document.getElementById('tab1');var oBtn = document.getElementById('btn1');var oTxt = document.getElementById('name');oBtn.onclick=function (){for(var i=0;i<oTab.tBodies[0].rows.length;i++){//模糊搜索var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();var sTxt = oTxt.value.toLowerCase();//关键词搜索var arr = sTxt.split(' ');oTab.tBodies[0].rows[i].style.background='';for(var j=0;j<arr.length;j++){if(sTab.search(arr[j])!= -1){//搜索到此数据高亮oTab.tBodies[0].rows[i].style.background='yellow';}}}};};</script></head><body>Name: <input id = "name" type = "text" /><input id = "btn1"type="button" value="搜索" /><table id="tab1" border="1" width="500"><thead><td>ID</td><td>Name</td><td>Age</td><td>操作</td></thead><tbody>  <tr><td>1</td><td>Jack</td><td>21</td><td></td></tr><tr><td>2</td><td>Sum</td><td>15</td><td></td></tr><tr><td>3</td><td>Jason</td><td>23</td><td></td></tr><tr><td>4</td><td>Lily</td><td>19</td><td></td></tr><tr><td>5</td><td>Tom</td><td>29</td><td></td></tr><tr><td>6</td><td>Young</td><td>18</td><td></td></tr><tr><td>7</td><td>Ocean</td><td>22</td><td></td></tr></tbody></table></body>
</html>

运行结果：搜索j ly(模糊搜索关键词分割搜索）:

Mr.J--Javascript表格创建模糊搜索关键词搜索相关推荐

JS实现淘宝提取关键词搜索
最近无聊写了个简单的关键词搜索代码,啧啧啧实现的效果: 用到的工具代码: /*** 公用方法*/ var utils={//获取滚动条的高度getScrollTop:function(){let s ...
分享12款 JavaScript 表格控件（DataGrid）
JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...
Python脚本刷网页访问量或关键词搜索频率
生活中经常会有一些刷票.刷热搜.刷访问量的情况,其原理是怎么实现的呢,本篇研究了利用脚本刷取网页访问量或关键词搜索频率,声明如下:本篇仅供学习交流,作者水平有限如有出入请纠正,请勿恶意使用封号后果自负 ...
调用天地图API实现关键词搜索
概述: 本文讲述结合天地图 js API,实现Openlayers中关键词的搜索与展示. 效果: 实现关键: 调用天地图APILocalSearch接口,实现关键词搜索,调用方式为:localsear ...
php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
JavaScript 表格专题
JavaScript表格专题表格的属性和方法表格的属性表格的方法 TableRow对象方法表格的属性和方法表格的属性 cells:返回包含表格中所有单元格的一个数组语法:tableObje ...
JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式
一:用最底层的方式,该方式用来创建别的对象树也可以代码演示: <html><head><title>DHTML技术演示---表格创建--用最底层的方式,其实该方式 ...
python实现关键词搜索
这个项目是要从存储了许多菜谱的json文件中依据关键词快速找到相应菜谱. 使用时,直接使用search函数即可找相关菜谱,支持多个关键词搜索,支持高评分词条优先显示.搜索结果为前十个相关菜谱,显示时有 ...
白杨SEO：小红书关键词搜索量怎么查？小红书关键词搜索长尾下拉词如何深处挖掘？
常言道,工欲善其事,必先利其器.如果你想在小红书上去获取SEO搜索流量,这个工具,也许是你正在找的! 看图在公众号白杨SEO上. 01.小红书平台调性关键词选得好,流量翻倍,基本上做SEO的人都知道 ...

Mr.J--Javascript表格创建模糊搜索关键词搜索

Mr.J--Javascript表格创建模糊搜索关键词搜索相关推荐

最新文章

热门文章

Mr.J--Javascript表格创建 模糊搜索 关键词搜索

Mr.J--Javascript表格创建 模糊搜索 关键词搜索相关推荐

最新文章

热门文章

Mr.J--Javascript表格创建模糊搜索关键词搜索

Mr.J--Javascript表格创建模糊搜索关键词搜索相关推荐