06.DOM操作应用高级
获取表格
tBodies、tHead、tFoot、
rows获取行 cells获取td
隔行变色
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1');
var oldColor=''; for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
//鼠标移入
oTab.tBodies[0].rows[i].onmouseover=function ()
{
oldColor=this.style.background;//表格每行原来的颜色
this.style.background='green';
};
//鼠标移除
oTab.tBodies[0].rows[i].onmouseout=function ()
{
this.style.background=oldColor;
};
//隔行变色
if(i%2)
{
oTab.tBodies[0].rows[i].style.background='';
}
else
{
oTab.tBodies[0].rows[i].style.background='#CCC';
}
}
};
</script>
</head> <body>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>
表格的添加删除
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1'); 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');//创建第一个td用于id
oTd.innerHTML=id++; //?
oTr.appendChild(oTd); var oTd=document.createElement('td');//创建第二个td用于姓名
oTd.innerHTML=oName.value;
oTr.appendChild(oTd); var oTd=document.createElement('td');//创建第三个td用于年龄
oTd.innerHTML=oAge.value;
oTr.appendChild(oTd); var oTd=document.createElement('td');//创建第四个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>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
表格搜索
搜索 版本1：基础版本——字符串比较
版本2：忽略大小写——大小写转换
版本3：模糊搜索——search的使用
版本4：多关键词——split 高亮显示、筛选
toLowerCase()变成小写
toUpperCase()变成大写
例子：var str='ABC'; alert(str.toLowerCase());
search()
方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
例子：
var str='ABC'; alert(str.search('A')); //弹出的是0
var str='ABC'; alert(str.search('B')); //弹出的是1
var str='ABC'; alert(str.search('a')); //弹出的是-1 如果没有找到任何匹配的子串，则返回 -1。
var str='ABC'; alert(str.search(/a/i)); //忽略大小写的搜索方法
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<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();
var sTxt=oTxt.value.toLowerCase(); var arr=sTxt.split(' '); oTab.tBodies[0].rows[i].style.display='none'; for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.display='block';
}
}
}
};
};
</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>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>王四</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
表格排序
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1'); oBtn.onclick=function ()
{
var arr=[];//定义一个空数组 for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
arr[i]=oTab.tBodies[0].rows[i];//把表格里的内容传到数组里
} arr.sort(function (tr1, tr2){//传参两个数 比较
var n1=parseInt(tr1.cells[0].innerHTML);
var n2=parseInt(tr2.cells[0].innerHTML); return n1-n2;//从小到大排列 若从大到小return n2-n1
}); for(var i=0;i<arr.length;i++)
{
oTab.tBodies[0].appendChild(arr[i]);
}
};
};
</script>
</head> <body>
<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>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>王四</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
06.DOM操作应用高级的更多相关文章
- 第七节 DOM操作应用-高级
表格应用: 获取:tBodies.tHead.tFoot.rows.cells <!DOCTYPE html> <html lang="en"> <h ...
- 学习blus老师js(5)--DOM操作应用高级
一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...
- Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合
操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...
- 解密jQuery内核 DOM操作的核心函数domManip
domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...
- 第25篇 jQuer快速学习（上）---选择器和DOM操作
这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...
- JavaScriptDom操作与高级应用（八）
一:Dom操作基础与高级应用 Node接口也定义了一些所有节点类型都包含的属性和方法.
- 迷你MVVM框架 avalonjs 沉思录 第2节 DOM操作的三大问题
jQuery之所以击败Prototype.js,是因为它自一开始就了解这三大问题,并提出完善的解决方案. 第一个问题,DOM什么时候可用.JS不像C那样有一个main函数,里面的逻辑不分主次.但JS是 ...
- Python之路day13 web 前端（JavaScript，DOM操作）
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- DOM 操作属性
DOM操作就是针对对象的操作 先写一个按钮,<input tupe="button" value="" id="id"> 这 ...
随机推荐
- @rpath/libswiftCore.dylib问题
dyld: Library not loaded: @rpath/libswiftCore.dylib Referenced from: /private/var/containers/Bundle ...
- October 26th Week 44th Wednesday 2016
No matter how far you may fly, never forget where you come from. 无论飞得多高,也不要忘记起飞的地方. I never forget w ...
- XML带多属性解析为一个实体类（利用反射）
最近在对接一个银行的项目,大概就是类似一个钱包的功能,在请求返回的数据时,发现返回的数据标准的XML格式的支付串,格式如下 <kColl id="inputOrig" app ...
- 让tomcat启动更快的设置
http://wiki.apache.org/tomcat/HowTo/FasterStartUp#Entropy_Source 关于随机数的"熵源"(entropy source ...
- [C#].NET中几种Timer的使用
这篇博客将梳理一下.NET中4个Timer类,及其用法. 1. System.Threading.Timer public Timer(TimerCallback callback, object s ...
- GitHub Windows客户端无法登录
Windows 7系统,下载GitHub后始终无法登录,貌似填写的用户名和密码都没有提交服务器,直接客户端“验证”的. 解决办法: 下载 Microsoft .NET Framework 4.5 安装 ...
- eclipse控制台乱码
- TMS320F28027/26/23/22/21/20芯片解密单片机破解原理！
TMS320F28027/26/23/22/21/20芯片解密单片机破解 TMS320F2802系列芯片解密型号: TMS320F28027F.TMS320F280270.TMS320F28027.T ...
- Java EE之数据库连接与插入
在这之前应该先: **保证项目中导入了mysql-connector-java-5.1.23-bin.jar **服务器上的数据库24小时连接成功: 1.在源包下新建一个普通的Java文件,取名为My ...
- NetBeans连接SQL server数据库教程
不废话,直接开始 1.下载sqljdbc.jar 可以从微软中国官方网站下载 SQLJDBC微软中国 笔者提供一个网盘链接Sqljdbc.jar 4个压缩包视版本选择,SQL 2012 用sqljdb ...