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. iBeacon在iPhone锁屏下有几率扫描不到蓝牙设备以及折中解决方案

    前言: 这个问题的确困扰了很久,查了国内外各种论坛.社区,都没找到一个有效的解决办法. 所幸后来用一种折中的办法解决了,但也不是从技术根本上解决的,所以有解决的兄弟还望指导下. 正文如下: 一.需求描 ...

  2. 给Cygwin重新安装curl

    之前已经安装过了cygwin了,但是重装了系统了. 不过发现cygwin倒是还可以继续使用. 现在想要使用其中的curl工具. 但是却在cygwin安装目录 E:\dev_install_root\c ...

  3. Proteus中MATRIX-8X8 LED灯的连接

    上面8个引脚用于选择行,低电平有效.下面8个引脚用于选择列,高电平有效. 经测试,红色点阵LED与之相反,是上面的引脚用于选择列,且高电平有效:下面的引脚用于选择行,低电平有效. 在AT89C51单片 ...

  4. ECOS-Mongodb安装

    安装Mongodb服务 安装Mongodb服务 author :James,jimingsong@vip.qq.com since :2015-03-03 下载Mongodb安装包(64位哦) 安装M ...

  5. setcookie 设置无效

    转载请署名 achieverain,谢谢 经常见人问PHP程序无法设置cookie.下面把我遇见过的情况都说一遍 1 PHP程序在执行setcookie之前有输出. 解决 :    把setcooki ...

  6. 服务管理--systemctl命令

    摘要: systemctl 是系统服务管理器命令,它实际上将 service 和 chkconfig 这两个命令组合到一起. 任务 旧指令 新指令 使某服务自动启动 chkconfig --level ...

  7. HDU 4291 A Short problem(2012 ACM/ICPC Asia Regional Chengdu Online)

    HDU 4291 A Short problem(2012 ACM/ICPC Asia Regional Chengdu Online) 题目链接http://acm.hdu.edu.cn/showp ...

  8. 新建HomeController控制器 继承BaseController

    CRC这个缩略词,在我看来可以有两种理解:一种是Cyclic Redundancy Check,即循环冗余检错技术:另一种则是Cyclic Redundance Code,即循环冗余校检码.在计算机网 ...

  9. hibernate主键generator属性介绍

    increment(递增) 用于为long, short或者int类型生成唯一标识.只有在没有其他进程往同一张表中插入数据时才能使用. 在集群下不要使用. identity (标识)对DB2,MySQ ...

  10. 人人公益模式系统开发app

    人人公益模式系统开发app(微or电 158.1500.1390 小凡团队)人人公益系统开发,人人公益系统模式定制,人人公益系统开发模式,人人公益平台开发系统,人人公益APP系统开发. 深圳人人优益网 ...