tab一些 添加 删除 搜索 案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
window.onload=function(){
var tab=document.getElementById('tab');
var oName=document.getElementById('name');
var oAge=document.getElementById('age');
var oBtn1=document.getElementById('bt1');
var aAs=document.getElementsByTagName('a');
var num=tab.tBodies[0].rows.length;
var oSearch=document.getElementById('search');
var oBtn2=document.getElementById('bt2');
//tab.tBodies[0].rows[0].cells[1].style.backgroundColor='yellow';

//隔行变色
function fnColor(){
for(var i=0; i<tab.tBodies[0].rows.length;i++)
{
if(i%2)
{
tab.tBodies[0].rows[i].style.backgroundColor='';
}
else{
tab.tBodies[0].rows[i].style.backgroundColor='yellow';
}
}
}
fnColor();

//鼠标移入变色
function moveColor(){
for(var i=0; i<tab.tBodies[0].rows.length;i++)
{
var oldColor='';
tab.tBodies[0].rows[i].onmouseover=function(){
oldColor=this.style.backgroundColor;
this.style.backgroundColor='green';
}
tab.tBodies[0].rows[i].onmouseout=function(){
this.style.backgroundColor=oldColor;
}
}
}

//点击删除
function fnClick(){
for(var i=0; i<aAs.length;i++)
{
aAs[i].onclick=function(){
tab.tBodies[0].removeChild(this.parentNode.parentNode);
fnColor();
}
}

}
fnClick();

//点击添加
oBtn1.onclick=function(){
num++;
var oTr=document.createElement('tr');

var oTd=document.createElement('td');
oTd.innerHTML=num;
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:;">删除</a>';
oTr.appendChild(oTd);
tab.tBodies[0].appendChild(oTr);
fnClick();
fnColor();
moveColor();
}
//alert(tab.tBodies[0].getElementsByTagName('td').length)
//搜索
oBtn2.onclick=function(){
if(oSearch.value=='')
{
alert('请输入内容');
return false;
}

fnColor();
for(var i=0; i<tab.tBodies[0].getElementsByTagName('td').length;i++)
{
var arr=[];
var oTd2=tab.tBodies[0].getElementsByTagName('td')[i];
var oVal=oSearch.value;

arr=oVal.split(' ');
for(var j=0; j<arr.length;j++)
{
if(oTd2.innerHTML.toLowerCase().search(arr[j].toLowerCase())!=-1)
{
oTd2.parentNode.style.backgroundColor='red';
}
}

}
}

}
</script>
<body>
名字:<input type="text" value="" id="name">
年龄:<input type="text" value="" id="age">
<input type="button" value="添加" id="bt1" /><br/>
搜索:<input type="text" value="" id="search">
<input type="button" value="搜索" id="bt2" />
<table border="1" width='500' id="tab">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>zheng</td>
<td>20</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>yan</td>
<td>22</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
<td>28</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
<td>25</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>5</td>
<td>王四</td>
<td>26</td>
<td><a href="javascript:;">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>

tab一些 添加 删除 搜索的更多相关文章

  1. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  2. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 仅在TabControl中的Tab中添加右键菜单

    若想实现仅在TabControl中的Tab中添加右键菜单,可在XAML中通过使用样式得到: <TabControl> <TabControl.ItemContainerStyle&g ...

  4. jquery 无刷新添加/删除 input行 实时计算购物车价格

    jquery 无刷新添加/删除 input行 实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...

  5. WPF下的Richtextbox中实现表格合并，添加删除行列等功能

    .Net中已有现在的方法实现这些功能,不过可能是由于未完善,未把方法公开出来.只能用反射的方法去调用它. 详细信息可以查看.Net Framework 的源代码 http://referencesou ...

  6. 编辑 Ext 表格（一）——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

  7. Angular-表单动态添加删除

    angular本身不允许去操作DOM,在angular的角度来说,所有操作都以数据为核心,剩下的事情由angular来完成.所以说,想清楚问题的根源,解决起来也不是那么困难. 前提 那么,要做的这个添 ...

  8. bootstrap制作搜索框及添加回车搜索事件

    下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件 下面是功能实现的代码: <!DOCTYPE html ...

  9. [CentOS]添加删除用户

    摘要 在安装CentOS的时候,我们只设置了root,类似windows的超级管理员.当然我们在工作的时候,为了安全考虑,不可能对外开发root,一方面是从安全的角度,另一方面也是方便管理. 添加删除 ...

随机推荐

  1. Mysql 5.6 解压版配置方案

    # For advice on how to change settings please see # http://dev.mysql.com/doc/refman/5.6/en/server-co ...

  2. ViewController

    ViewController ViewController 进入VC后先调用loadView,再调用ViewDidLoad ViewDidLoad皆为系统调用 需要先调用[super viewDidL ...

  3. WebForm 内置对象QueryString、Repeater删改

    一.内置对象QueryString--地址栏数据拼接 格式:?key=value 如:string path = "Default2.aspx?aaa=" + TextBox1.T ...

  4. POJ 2484 A Funny Game

    博弈. $n>=3$,后手赢,否则先手赢. #pragma comment(linker, "/STACK:1024000000,1024000000") #include& ...

  5. KMP 算法 学习 整理

    我自己整理的KMP算法的PDF文件:http://pan.baidu.com/s/1o8yKIi2提取密码:8291 别的就不多说啥了,感谢来自海子 博客园的 资料--

  6. openstack私有云布署实践【9.3 主从controller单向同步glance-image目录】

    采用Rysnc单向同步,而不用双方实时同步,原因是在历史的运行过程中,我们发现,有些镜像包太大,当在主用的glance将镜像保存时,并不是一时半会就把镜像保存好,当主用在保存时,备用节点又在实时同步那 ...

  7. PyCharm基本使用

    调节PyCharm的背景颜色 File>Settings>Appearance&Behavior>Appearance 在PyCharm中切换Python解释器版本 File ...

  8. java 缓存ehcache的使用(使用方式一)

    实体要序列化 resource文件夹下建立 ehcache.xml <?xml version="1.0" encoding="UTF-8"?> & ...

  9. [Q]pdfFactory虚拟打印机的安装

    安装打图精灵过程中会提示是否安装pdfFactory虚拟打印机,建议选择安装. 若未安装,在安装打图精灵之后想安装pdfFactory,该软件可以在打图精灵应用程序文件夹下找到( 系统"开始 ...

  10. IntentService和Service的区别

    整个看下来是一个Service+Thread+handle的结合体, Service:比Activity的被kill的级别低 Thread:不阻塞UI线程 Handle:队列式的消息循环 那这个玩意的 ...