js实现表格的添加删除搜索和排序

最新推荐文章于 2024-04-27 21:55:17 发布

Q_004

最新推荐文章于 2024-04-27 21:55:17 发布

阅读量2.1k

点赞数 2

文章标签： js 表格添加删除排序搜索 html

本文链接：https://blog.csdn.net/q_004/article/details/77431004

版权

用js实现的对表格的简单的操作，添加一行删除一行根据姓名搜索和按照id排序

其中的搜索可以忽略大小写，模糊搜索(模糊搜索即根据姓名中的一个字就可以搜索到所要的内容，还可以多个内容搜索即多个名字中的一个字或全称用空格分隔开，进行多个关键字的搜索)

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	
		</style>
		
		<script type="text/javascript">
			window.οnlοad=function()
			{
				var oTab=document.getElementById('tab1')
				var oBtn=document.getElementById('btn1');
				var oBtn2=document.getElementById('btn2');
				var oBtn3=document.getElementById('btn3')
				var oAge=document.getElementById('age');
				var oName=document.getElementById('name');
				var id=oTab.tBodies[0].rows.length+1;
				
				
				
				oBtn.οnclick=function()
				//添加的点击事件
				{   
					var oTr=document.createElement('tr'); //定义一个添加事件的数组oTr
					
					var oTd=document.createElement('td'); //创建Id的td
					oTd.innerHTML=id++;
					oTr.appendChild(oTd);    //把创建的td添加到数组Tr中
					
					var oTd=document.createElement('td');   //创建姓名的td
					oTd.innerHTML=oName.value;
					oTr.appendChild(oTd);
					
					var oTd=document.createElement('td');  //创建年龄的td
					oTd.innerHTML=oAge.value;
					oTr.appendChild(oTd);
					
					var oTd=document.createElement('td');  //创建删除的td
					oTd.innerHTML='<a href="javascript:;">删除</a>'
					oTr.appendChild(oTd);
					
					oTd.getElementsByTagName('a')[0].οnclick=function()  //删除的点击事件
					{
						oTab.tBodies[0].removeChild(this.parentNode.parentNode);  //删除
					}
					oTab.tBodies[0].appendChild(oTr);  //把创建的tr添加到tBodies中
				}
				
				
			   
			    oBtn2.οnclick=function()
			    //搜索的点击事件  
				{
					for(var i=0;i<oTab.tBodies[0].rows.length;i++)
					{
						var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
						var sName=oName.value.toLowerCase();  //toLowerCase()忽略大小写
						var arr=sName.split('');    //split()模糊搜索
						
						 //先把所有颜色设置为空
//						oTab.tBodies[0].rows[i].style.display='none';  //筛选
	                    oTab.tBodies[0].rows[i].style.background='';  
						
						for(var j=0;j<arr.length;j++)
						{
							if(sTab.search(arr[j])!=-1)  //search()模糊搜索
						   {
							oTab.tBodies[0].rows[i].style.background='yellow';
//							oTab.tBodies[0].rows[i].style.display='block';
						   }
						  
						  
						}
						
					}
				}
				
				oBtn3.οnclick=function()
				//排序的点击事件
				{
					var arr=[];
					for(var i=0;i<oTab.tBodies[0].rows.length;i++)
					{
						arr[i]=oTab.tBodies[0].rows[i];
					}
					arr.sort(function(tr1,tr2){
						var n1=parseInt(tr1.cells[0].innerHTML);
						var n2=parseInt(tr2.cells[0].innerHTML);
						return n1-n2;
					});
					for(var i=0;i<arr.length;i++)
					{
						oTab.tBodies[0].appendChild(arr[i]);
					}
					
				}
			   
			   
			}
		</script>
	</head>
	<body>
		姓名：<input type="text" id="name" />
		年龄：<input type="text" id="age"/>
		<input type="button" id="btn1" value="添加" />
		<input type="button" name="btn2" id="btn2" value="搜索" />
		<input type="button" name="btn3" id="btn3" value="排序" />
		<table border="1" id="tab1" width="500">
			<thead>
				<td>ID</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>操作</td>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>34</td>
					<td></td>
				</tr>
				<tr>
					<td>3</td>
					<td>李四</td>
					<td>11</td>
					<td> </td>
				</tr>
				<tr>
					<td>2</td>
					<td>王五</td>
					<td>34</td>
					<td></td>
				</tr>
				<tr>
					<td>4</td>
					<td>李麻子</td>
					<td>39</td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td>HuHansan</td>
					<td>39</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>