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. vc++项目 : error PRJ0002 : 错误的结果 1 (从“C:\Program Files\Microsoft SDKs\Windows\v6.0A\bin\rc.exe”返回)。

    右击工程->属性->配置属性->清单工具->输入和输出->嵌入清单,把是改成否

  2. python 算法练习

    根据给定的线性函数来确定函数的表达形式: examples: get_function([0,1,2,3,4]) => f(x)=x get_function([1,4,7,10,13]) =& ...

  3. Openjudge-NOI题库-二维数组回形遍历

    题目描述 Description 给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按回形从外向内顺时针顺序遍历整个数组.如图所示:  输入输出格式 Input/ou ...

  4. 创建 userSettings/Microsoft.SqlServer.Configuration.LandingPage.Properties.Settings 的配置节处理程序时出错: 未能加载文件或程序集“System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”或它的某一个依赖项。系统没找到指定的文件

    创建 userSettings/Microsoft.SqlServer.Configuration.LandingPage.Properties.Settings 的配置节处理程序时出错: 未能加载文 ...

  5. 使用rsync无密码传输

    众多数据库服务器的管理过程中,在不同服务器间的文件传输是免不了的.您可以使用scp命令或FTP方法完成文件的发送和接收,这篇文章我将给大家介绍另外一种方法,这就是rsync命令.rsync是文件传输程 ...

  6. ElasticSearch(7)-排序

    引用自ElaticSearch权威指南 一.排序 相关性排序 默认情况下,结果集会按照相关性进行排序 -- 相关性越高,排名越靠前. 这一章我们会讲述相关性是什么以及它是如何计算的. 在此之前,我们先 ...

  7. Dynamic Programming - leetcode [动态规划]

    115. Distinct Subsequences 96. Unique Binary Search Trees 120. Triangle 123. Best Time to Buy and Se ...

  8. Opencv2.2版本以上CvvImage类的使用

    Opencv 2.2以上的版本不再包含CvvImage类,可有时我们在MFC中显示图片仍然需要CvvImage类,特别进行图像的拷贝.显示等操作的时候. 早期版本的CvvImage.h添加进工程也是可 ...

  9. 转换汉字为字符原始码 如：汉字 -> &#27721;

    $output = mb_convert_encoding($str, 'HTML-ENTITIES', $encode);$encode为输入的比如utf-8,因为utf-8可以包括英文,中文等字符 ...

  10. 全局变量引起的BUG

    花费3个小时解决了一个问题,时间比较长. 这次问题的原因是全局变量引起的,一个实例的函数用到了全局变量计算一个值,而全局变量的这个值会进行改变,所以在不同时期算出来的值是不一致的.而调用这个实例函数的 ...