您的位置：首页 > Web前端 > JavaScript

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

2017-08-20 18:22 633 查看

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

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

代码如下：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

</style>

<script type="text/javascript">
window.onload=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.onclick=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].onclick=function() //删除的点击事件
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode); //删除
}
oTab.tBodies[0].appendChild(oTr); //把创建的tr添加到tBodies中
}

oBtn2.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 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.onclick=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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