javascript表格操作（高亮，添加，删除，搜索，排序）

最新推荐文章于 2021-08-05 09:38:04 发布

luohui2017

最新推荐文章于 2021-08-05 09:38:04 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：表格应用插入删除搜索排序

本文链接：https://blog.youkuaiyun.com/luohui2017/article/details/79341127

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现表格数据动态增删查改的方法。通过具体实例展示了如何添加新行、按条件搜索以及对表格进行排序等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oTab=document.getElementById('tab1');
	var oBtn1=document.getElementById('btn1');
	var oBtn2=document.getElementById('btn2');
	var oBtn3=document.getElementById('btn3');
	var oTxt=document.getElementById('txt1');
	var iNowId=oTab.tBodies[0].rows.length+1;
	var bAsc=true;	//是否是升序排列
	
	oBtn1.onclick=function ()
	{
		var oTr=document.createElement('tr');
		var oTd=null;
		
		oTd=document.createElement('td');
		oTd.innerHTML=iNowId++;
		oTr.appendChild(oTd);
		
		oTd=document.createElement('td');
		oTd.innerHTML=oTxt.value;
		oTr.appendChild(oTd);
		
		oTd=document.createElement('td');
		oTd.innerHTML='<a href="javascript:;">删除</a>';
		oTr.appendChild(oTd);
		
		oTd.getElementsByTagName('a')[0].onclick=function ()
		{
			oTab.tBodies[0].removeChild(this.parentNode.parentNode);
		};
		
		oTab.tBodies[0].appendChild(oTr);
	};
	
	oBtn2.onclick=function ()
	{
		var i=0;
		
		for(i=0;i<oTab.tBodies[0].rows.length;i++)
		{
			var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
			var sValueInTxt=oTxt.value.toLowerCase();
			var arr=sValueInTxt.split(' ');
			
			var bFound=false;
			
			for(var j=0;j<arr.length;j++)
			{
				if(arr[j]=="")
				{
					break;
				}
				if(sValueInTab.search(arr[j])!=-1)
				{
					bFound=true;
					break;
				}
			}
			
			if(bFound)
			{
				oTab.tBodies[0].rows[i].style.background='yellow';
			}
			else
			{
				oTab.tBodies[0].rows[i].style.background='';
			}
		}
	};
	
	oBtn3.onclick=function ()
	{
		var arr=[];
		var i=0;
		//1.转成数组
		for(i=0;i<oTab.tBodies[0].rows.length;i++)
		{
			arr[i]=oTab.tBodies[0].rows[i];
		}
		
		//2.数组排序
		arr.sort(function (tr1, tr2){
			if(bAsc)
			{
				return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);
			}
			else
			{
				return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML);
			}
		});
		
		//3.重新插入
		for(i=0;i<arr.length;i++)
		{
			oTab.tBodies[0].appendChild(arr[i]);
		}
		
		bAsc=!bAsc;
		
		/*if(bAsc)
		{
			bAsc=false;
		}
		else
		{
			bAsc=true;
		}*/
	};
};
</script>
</head>

<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="添加" />
<input id="btn2" type="button" value="搜索" />
<input id="btn3" type="button" value="排序" />

<table id="tab1" border="1" width="400">
	<thead>
    	<td>ID</td>
    	<td>姓名</td>
    	<td>操作</td>
    </thead>
    <tbody>
    	<tr>
        	<td>1</td>
        	<td>Blue</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>2</td>
        	<td>Leo</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>3</td>
        	<td>莫莫</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>4</td>
        	<td>aaa</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>5</td>
        	<td>bbb</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>6</td>
        	<td>ccc</td>
        	<td></td>
        </tr>
    </tbody>
</table>
</body>
</html>

重要知识点汇总：

var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();

oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase() 意为oTab 中的所有tBody中的第0个tBody中的第I个<tr>中的第一个<td>. rows为行，cells为列.这是表格中特有的简写操作。toLowerCase()意为转化为小写字母，与之对应的为toUpperCase().

排序的三个重要步骤为：

1.转化成数组

2.给数组排序

3.重新插入<li>