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"> 这 ...
随机推荐
- Eclipse下载与安装
有很多小伙伴不知道eclipse在哪里下载以及怎么安装的,那我来给大家做个演示吧. 学习java比较常用的软件就是eclipse,而eclipse安装后并不能马上使用,还需要安装jdk并搭建环境.下面 ...
- linux常用命令备忘
scp使用非默认端口 scp -P port username@.....IP:/dir 要拷贝到的地方
- NOPI读取模板导出（Excel中追加数据）
在Controller里,我们定义一个FileResult的Action,返回值是一个文件形式被浏览器下载下来. [HttpGet] public FileResult ExportProductLi ...
- iOS自动检测版本更新
虽然苹果官方是不允许应用自动检测更新,提示用户下载,因为苹果会提示你有多少个软件需要更新,但是有的时候提示用户一下有新版还是很有必要的. 首先说一下原理: 每个上架的苹果应用程序,都会有一个应用程序的 ...
- 与你相遇好幸运，gen8安装
gen8到手后,立马去买了 SSD https://item.jd.com/2010277.html 支架 https://item.jd.com/2671609.html NAS盘 https:// ...
- 【Java EE 学习 75 下】【数据采集系统第七天】【二进制运算实现权限管理】【使用反射初始化权限表】【权限捕获拦截器动态添加权限】
一.使用反射动态添加权限 在该系统中,我使用struts2的时候非常规范,访问的Action的形式都是"ActionClassName_MethodName.action?参数列表" ...
- 【HTML5】 web上的音频
<!-- audio通过属性的设置可以控制音频播放的行为: 表6-2 audio元素的属性 ——————————————————————————————————————————————————— ...
- 【Java并发系列02】Object的wait()、notify()、notifyAll()方法使用
一.前言 对于并发编程而言,除了Thread以外,对Object对象的wati和notify对象也应该深入了解其用法,虽然知识点不多. 二.线程安全基本知识 首先应该记住以下基本点,先背下来也无妨: ...
- js new
如果一个函数前面带上new来调用该函数,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将被绑定到那个新对象上 即: function B(){} var a=new B( ...
- html内容超出了div的宽度如何换行让内容自动换行
在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要将其换行,实现的css代码如下 在工作中评论内容测试遇到评论着的评论内容为:"dddddddddd ...