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. SqlParameter 中 top 的使用

    public DataTable GetAdminTopDCSCheckReport(int top) { StringBuilder strSql = new StringBuilder(); st ...

  2. mysql给表添加外键并查询

    CREATE TABLE `heart` ( `heart_ID` ) NOT NULL AUTO_INCREMENT, `heart_name` ) CHARACTER SET utf8 NOT N ...

  3. 在ubuntu14.04上安装openstack mitaka

    最近在工作环境安装部署了juno版本,在GE口测试网络性能不太满意,发现mitaka版本支持ovs-dpdk,于是抽时间安装实验一番. 参考官网的安装文档,先准备将mitaka版本安装好再配置ovs. ...

  4. Chapter 21_2 模式匹配函数

    基础函数比较简单,就是几个普通的函数string.byte.string.char.string.rep.string.sub.string.format还有大小写转换函数upper和lower. 接 ...

  5. 干货篇：揭开CSS盒模型神秘的面纱

    写博客可以对学习内容进行总结.分享和交流(面对面的技术分享会也不错)... 如果是单纯的记录,印象笔记完全够了. 步入正题,盒模型是web布局核心,掌握基础知识,以后实战中会如鱼得水~ 概念与历史 C ...

  6. win8.1和centos6.5 双系统启动问题

    笔记本系统为centos 6.5,由grub引导启动,安装了win 8.1后,开机直接进入win 8.1,没有出现centos6.5 引导项,解决办法: 一.开机按ESC键进入启动顺序菜单,选择cen ...

  7. Hadoop fs 命令详解

    1. 环境:hadoop-2.6.0 2. 参数说明: hadoop fs [-appendToFile <localsrc> ... <dst>] [-cat [-ignor ...

  8. 关于json和字符串之间的转换

    在最近的工作中,使用到JSON进行数据的传递,特别是从前端传递到后台,前台可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,后台使用requ ...

  9. Spring之ContextLoaderListener的作用

    Spring org.springframework.web.context.ContextLoaderListener public class ContextLoaderListener exte ...

  10. use ContourPlot-使用ContourPlot

    use ContourPlot to draw implicit function graphics 使用ContourPlot 画隐函数图像 for example $x^{3}+y^{3}-3xy ...