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 ...
随机推荐
- 无法在web服务器上启动调试，服务器不支持对ASP.NET 或ATL Server应用程序进行调试。
无法在web服务器上启动调试,服务器不支持对ASP.NET 或ATL Server应用程序进行调试. a>.DCOM配置里的属性灰色不可用的解决方法, 1>.管理工具->组件服务 ...
- 4．PHP 教程_PHP 变量
PHP 变量 变量是用于存储信息的"容器": <?php $x = 5; $y = 6; $z = $x + $y; echo $z; ?> 与代数相似 x=5 y=6 ...
- 利用python进行数据分析之数据聚合和分组运算
对数据集进行分组并对各分组应用函数是数据分析中的重要环节. group by技术 pandas对象中的数据会根据你所提供的一个或多个键被拆分为多组,拆分操作是在对象的特定轴上执行的,然后将一个函数应用 ...
- gdal 1.9+python 2.7开发环境配置
最近项目使用Cesium平台基于WegGl做web地球,其中关于地形数据有一种支持格式为terrain的地形数据.这种格式可以通过一个python工具切dem来得到. 下面记录下配置gdal+pyth ...
- android开发环境安装记录
首先进入http://developer.android.com/sdk/index.html, Google提供了一个新的DeveloperTools,即:ADT Bundle,中文翻译之:ADT捆 ...
- HDU 1544 Palindromes(回文子串)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1544 问题分析: 问题要求求出字符串的连续子串中的回文子串个数.首先,需要区分连续子串与子序列的区别. ...
- 谁有SMI-S Provider的一些源码，能参考一下吗
我要用OpenPegasus根据SMI-S规范来写provider,不知道如何下手啊,求高手指点
- Ext JS学习第十五天 Ext基础之 Ext.DomQuery
此文同来记录学习笔记 •Ext.dom.Query 嗯,这个类一看就是到时做什么事儿的,不用我去过多的解释了.这个类一共提供了8个方法供开发人员去使用. •要说最常用的方法,无非就是Ext.query ...
- 浅谈web前端开发阅历
WEB前端研发工程师,在国内算是一个朝阳职业,这个领域没有学校的正轨教育,大多数人都是靠本人自学成才.本文次要引见本人从事web开发以来(从大二至今)看过的书籍和本人的成长过程,目的是给想了解Java ...
- Raspberry 3安装docker
SD卡制作 准备一张4GB或者以上的micro sd卡,下载系统镜像,例如raspbian-jessie-lite.img,并使用刷机工具,如Pi filler将其写入sd卡,当然也可以使用命令行的d ...