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. Chapter 21_3 模式

    很多地方都会看到各种匹配模式,每次接触这些函数,颇使人望文生畏. 今天就来好好面对它.认识它.了解它.最后战胜它. 匹配模式都是用一串常规的字符串来描述,最主要的是理解这些字符串的语法及含义(即它能匹 ...

  2. BZOJ 1303 【CQOI2009】中位数图

    baidu了一下bzoj水题列表...找到这道题.   题目大意:给定一个数t,在给定的一段包含1-n的序列中找出多少个长度为奇数子序列的中位数为t. 第一眼没看数据范围,于是开心的打了一个O(n^3 ...

  3. zabbix 布署实践【5 使用邮箱SMTP SSL推送告警邮件】

    由于传统的邮件推送脚本使用smtp 25端口,在各大邮箱提供商已不适用,已经向SSL过渡,这里以QQ邮箱为例,使用SSL 465端口 登录zabbix-server 进入 cd /usr/lib/za ...

  4. dplyr 数据操作 常用函数（1）

    上面介绍完dplyr中,几个主要的操作函数后,我们再进一步了解dplyr中那些函数可能我们会经常要用到. 这里主要根据dplyr包作者的书籍目录来把它列出来. 1.add_rownames 添加行名称 ...

  5. window下安装apache---使用wamp

    01 wamp-server-wamp5-2-5-multi-win.exe 02 wamp报错时,需要的补丁(vcredist_x64.exe) 无法启动此程序,因为计算机中丢失MSVCR110.d ...

  6. 8.MyBatos的动态Sql

    1.创建javaWeb项目MyBatis_dynamicSQL并在WebRoot下的WEB-INF下的lib下添加如下jar文件 cglib-nodep-2.1_3.jar log4j-1.2.17. ...

  7. c++ inline关键字的理解

    1. inline是实现修饰符,而非声明修饰符,所以应该用于实现部分的修饰(你也可以放置inline在声明,但是没有必要) 2. 所有中类中定义的函数都默认声明为inline函数,所有我们不用显示地去 ...

  8. NFV 利器 FD.io VPP

    在VPP中,报文以向量批处理的形式在节点之间以流水线的方式处理,可以更加高效的利用CPU的i-cache,节点可以动态生成并加入到转发图中,节点分为多种类型,如VLIB_NODE_TYPE_INPUT ...

  9. border表格有的自动换行，有的不能自动换行！

    解决手机端tab超过设置的宽度换行! <table id="vip-tab"> <tr id="leibie"> <th clas ...

  10. HDU 2177 取(2堆)石子游戏 （威佐夫博弈）

    题目思路:威佐夫博弈: 当当前局面[a,b]为奇异局时直接输出0 否则: 1.若a==b,输出(0 0): 2.将a,b不停减一,看能否得到奇异局,若有则输出: 3.由于 ak=q*k(q为黄金分割数 ...