Javascript DOM 03 表格添加、删除 + 搜索
<script>
window.onload=function (){
/*var str='abcdef';
alert(str.search('g')); //找到并且返回字符串出现的位置，如果没找到-1
*/
/*
var str='abc 123 ert';
var arr=str.split(' ');
alert(arr);
*/
/*var oTab=document.getElementById('tab1');
//alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);*/ //表格隔行变色
var oTab=document.getElementById('tab1');
//alert(oTab.rows.length);
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
if(i%2==1){ oTab.tBodies[0].rows[i].style.background=''; }
else{oTab.tBodies[0].rows[i].style.background='#ccc'; }
//鼠标经过时颜色的改变
oTab.tBodies[0].rows[i].onmouseover=function ()
{
oBgColor=this.style.background;
this.style.background='green';
}
oTab.tBodies[0].rows[i].onmouseout=function ()
{
this.style.background=oBgColor;
} }
// 增加，删除
var oBtn=document.getElementById('btn1');
var oName=document.getElementById('name');
var oAge=document.getElementById('age');
var id=oTab.tBodies[0].rows.length+1;
oBtn.onclick=function ()
{
var oTr = document.createElement('tr'); var oTd=document.createElement('td');
oTd.innerHTML=id++ //oTab.tBodies[0].rows.length+1;//添加 ID
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);
oTd.getElementsByTagName('a')[0].onclick=function ()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
} oTab.tBodies[0].appendChild(oTr);
} }
</script>
</head> <body>
姓名：<input id="name" type="text" />
年龄：<input id="age" type="text" />
<input id="btn1" type="button" value="添加" /> <table id="tab1" border="1" width="500"> <thead> <td> ID</td>
<td> 姓名</td>
<td> 年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td> 2</td>
<td> Mrs.Jimmy</td>
<td> 17</td>
<td></td>
</tr> <tr>
<td> 3</td>
<td> 张三</td>
<td> 27</td><td></td>
</tr> <tr>
<td> 1</td>
<td> 李斯</td>
<td> 32</td><td></td>
</tr> <tr>
<td> 4</td>
<td> 李四</td>
<td> 12</td><td></td>
</tr> <tr>
<td> 5</td>
<td> Mr.ZhiNiao</td>
<td> 12</td><td></td>
</tr> </tbody> </table>
</body>
搜索
<script>
window.onload=function (){ var oTab=document.getElementById('tab1');
var oTxt=document.getElementById('name');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();//toLowerCase()函数忽略大小
var sTxt=oTxt.value.toLowerCase();
//alert(sTab.search(sTxt));//search 匹配到模糊字段，打印为 0 ，没有匹配为 -1
/* if(sTab.search(sTxt)!=-1)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
else
{
oTab.tBodies[0].rows[i].style.background='';
}
*/
//多关键字筛选
//var str = 'abc c her';
//alert(str.split(' '));
var arr=sTxt.split(' ');//分隔带空格的字符串
oTab.tBodies[0].rows[i].style.background='';
for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
}
} } }
</script>
</head> <body>
姓名：<input id="name" type="text" />
<input id="btn1" type="button" value="搜索" /> <table id="tab1" border="1" width="500"> <thead>
<td> ID</td>
<td>姓名</td>
<td> 年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td> 2</td>
<td>Mrs.Jimmy</td>
<td> 17</td>
<td></td>
</tr> <tr>
<td> 3</td>
<td>张三</td>
<td> 27</td><td></td>
</tr> <tr>
<td> 1</td>
<td>李斯</td>
<td> 32</td><td></td>
</tr> <tr>
<td> 4</td>
<td>李四</td>
<td> 12</td><td></td>
</tr> <tr>
<td> 5</td>
<td>Mr.ZhiNiao</td>
<td> 12</td><td></td>
</tr> </tbody> </table>
</body>
Javascript DOM 03 表格添加、删除 + 搜索的更多相关文章
- JavaScript DOM方法表格添加删除
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- tab一些 添加 删除 搜索
tab一些 添加 删除 搜索 案例 <!DOCTYPE html><html lang="en"><head> <meta charset ...
- DOM给表格添加新一行和删除整个行的内容
DOM用appendChild()给表格添加新一行时,要注意,在HTML中没特别设置<thead>,<tbody>时,会自动添加上,所以要选择表格第一个元素在添加tr. // ...
- JavaScript在div后添加删除div
var idd = 'str'; $('.task-done-detail-content-p7').click(function () { var id = this.id; if(idd !== ...
- JavaScript 原生控制元素添加删除
参考: https://blog.csdn.net/leijie0322/article/details/80664554 https://www.cnblogs.com/jpfss/p/910620 ...
- JQ DOM元素 创建 添加 删除
创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); / ...
- WPF下的Richtextbox中实现表格合并，添加删除行列等功能
.Net中已有现在的方法实现这些功能,不过可能是由于未完善,未把方法公开出来.只能用反射的方法去调用它. 详细信息可以查看.Net Framework 的源代码 http://referencesou ...
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
随机推荐
- 5．PHP 教程_PHP echo/print
PHP echo 和 print 语句 echo和print区别: echo-可以输出一个或多个字符串 print-只允许输出一个字符串,返回值总为1 提示:echo输出的速度比print快,echo ...
- Symfony框架系列----常用命令
一.常用命令 从Entity操作数据库: app/console doctrine:database:create # 创建数据库 app/console doctrine:schema:update ...
- monkeyrunner学习--手机按键
按下HOME键 device.press('KEYCODE_HOME','DOWN_AND_UP') 按下BACK键 device.press('KEYCODE_BACK','DOWN_AND_UP' ...
- 高质量程序设计指南C/C++语言——内存管理
• free()和delete只是把指针所指的内容给释放掉,并没有把指针本身删掉.指针被free()或delete以后其地址仍然不变(不等于NULL),只是该地址对应的内存是垃圾——p成了野指针.如果 ...
- Oracle10g--plSql命令
每天学点Oracle10g--plSql命令 附录B SQL*PLUS Sql*plus 中使用绑定变量: sql> variable x number; sql> exec :x := ...
- XML中SystemID和PublicID的区别
http://hi.baidu.com/binboot007/item/1533f91d52113d7c7b5f259c http://supportweb.cs.bham.ac.uk/documen ...
- php中 $$str 中 "$$" 的解释
原文:php中 $$str 中 "$$" 的解释 这种写法称为可变变量有时候使用可变变量名是很方便的.就是说,一个变量的变量名可以动态的设置和使用.一个普通的变量通过声明来设置,例 ...
- C#获取桌面壁纸图片的路径(Desktop Wallpaper)
原文 C#获取桌面壁纸图片的路径(Desktop Wallpaper) 利用 Windows 的 API 获取桌面壁纸的实际路径,使用的是 SystemParametersInfo 这个API,此AP ...
- 不同服务器之间使用svn钩子post-commit同步代码遇到的证书认证问题.md
遇到的问题,以下其他问题都是因解决这个问题引申出来的问题 VisualSVN hooks自动同步更新到web服务器 错误信息如下: Error validating server certificat ...
- Android 4.4及以上系统下应用的状态栏颜色渐变效果的实现
上一篇转载的博文里讲到了怎么开启状态栏透明的效果,不过如果在有ActionBar的情况下,会出现状态栏透明而ActionBar横亘在状态栏和内容之间的丑陋情况,如下图: 通过百度之后,发现了GitHu ...