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

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

制作表格：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<!--
                	作者：[email protected]
                	时间：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表格创建 模糊搜索 关键词搜索

猜你喜欢

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