DOM高级
表格应用
获取
tBodies， tHead， tFoot， rows， cells
隔行变色
鼠标移入高亮，
添加，删除一行
DOM的方法使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输出表格</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1'); //第一种写法 //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[2].getElementsByTagName('td')[1].innerHTML);
alert(oTab.tBodies[0].rows[2].cells[1].innerHTML);
};
</script>
</head> <body>
<table id="tab1" border="1" width="400">
<thead>
<td>ID</td>
<td>姓名</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>流氓</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>莫莫</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>小李</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>小米</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>小明</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
简单表格输出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
window.onload=function()
{
var oBtn=document.getElementById('btn1');
var oTab=document.getElementById('tab1');
//用变量改变顺序还是倒序
var bAsc=true;
oBtn.onclick=function()
{
//点击生成数组
var arr=[];
var i=0; for(i=0; i<oTab.tBodies[0].rows.length; i++)
{
//把每行赋给一个数组，坐标从0开始
arr[i]=oTab.tBodies[0].rows[i];
}
//用sort排序arr
arr.sort(function(tr1, tr2){
if(bAsc)
{
return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);
}
else
{
return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML);
} });
//以此打印出每行
for(i=0;i<arr.length;i++)
{
oTab.tBodies[0].appendChild(arr[i]);
} bAsc=!bAsc;
};
} </script> <body> <input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="400">
<thead>
<td>编号</td>
<td>姓名</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>miang</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>Bloo</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>home</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>heep</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
表格坐标的排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格搜索</title>
<script>
window.onload=function()
{
var oBtn=document.getElementById('btn1');
var oTab=document.getElementById('tab1');
var oTxt=document.getElementById('txt1'); oBtn.onclick=function()
{
var i=0; for(i=0; i<oTab.tBodies[0].rows.length; i++)
{
//获取每行转成大写
var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
//获取每个txt转换成大写
var sValueInTxt=oTxt.value.toLowerCase();
//把文本框的数组用空格分隔
var arr=sValueInTxt.split(' '); var bFound=false; for(var j=0;j<arr.length;j++)
{
//监控text里的value字符串，不为空则开bFound
if(sValueInTab.search(arr[j])!=-1)
{
bFound=true;
break;
}
} if(bFound)
{
oTab.tBodies[0].rows[i].style.background='yellow'; }
else{
oTab.tBodies[0].rows[i].style.background='';
} }
}
} </script>
</head> <body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="搜索" /> <table id="tab1" border="1" width="400">
<thead>
<td>编号</td>
<td>姓名</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>miang</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>Bloo</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>home</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>heep</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
表格的搜索
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格的删除</title>
<script>
window.onload=function()
{
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var iNowId=oTab.tBodies[0].rows.length+1;
oBtn.onclick=function()
{
//创建行标签
var oTr=document.createElement('tr');
var oTd=null;
//创建第一个空白格
oTd=document.createElement('td');
//内容等于坐标+1
oTd.innerHTML=iNowId++;
//添加到行里
oTr.appendChild(oTd); //创建第2个空白格
oTd=document.createElement('td');
//添加输入框内容
oTd.innerHTML=oTxt.value;
//添加到行里
oTr.appendChild(oTd); //创建第3个空白格
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="txt1" type="text" />
<input id="btn1" type="button" value="添加" />
<table id="tab1" border="1" width="400">
<thead>
<td>编号</td>
<td>姓名</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>miang</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>Bloo</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>home</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>heep</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
表格的创建加删除
表格应用（2）
搜索
版本1：基础版本------字符串比较
版本2：忽略大小写----大小写转换
版本3： 模糊搜索---search的使用
版本4：多关键词---split
高亮显示， 筛选
排序
移动li
元素排序： 转换---排序----插入
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1'); oBtn.onclick=function ()
{
var aLi=oUl.getElementsByTagName('li');
var arr=[];
var i=0; //1.转成数组
for(i=0;i<aLi.length;i++)
{
arr[i]=aLi[i];
} //2.数组排序
arr.sort(function (li1, li2){
return parseInt(li1.innerHTML)-parseInt(li2.innerHTML);
}); //3.重新插入
for(i=0;i<arr.length;i++)
{
oUl.appendChild(arr[i]);
}
};
};
</script>
</head> <body>
<input id="btn1" type="button" value="排序Li" />
<ul id="ul1">
<li>32</li>
<li>12</li>
<li>87</li>
<li>9</li>
<li>18</li>
</ul>
</body>
</html>
li的排序
表单应用（1）
表单的基本基础知识
什么是表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oForm=document.getElementById('form1');
var oUser=document.getElementsByName('user')[0];
var oPass=document.getElementsByName('pass')[0]; oForm.onsubmit=function ()
{
if(oUser.value=='' || oPass.value=='')
{
alert('您填错了');
return false;
}
}; oForm.onreset=function ()
{
/*if(confirm('是否要清空？'))
{
return true;
}
else
{
return false;
}*/ return confirm('是否要清空？');
};
};
</script>
</head> <body>
<form id="form1" action="http://www.miaov.com/" method="get">
用户名：<input type="text" name="user" />
密码：<input type="password" name="pass" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
</html>
简单表单提交
向服务器提交数据，比如用户注册
action 提交到哪里
表单事件
onsubmit 提交时发生
onreset 重置时发生
表单应用（2）
表单内容验证
阻止用户输入非法字符 阻止事件
输入时， 失去焦点时验证 onkeyup onblur
提交时检查 onsubmit
后台数据检查
本节重点
表格----元素获取
表格-----隔行变色，高亮显示
表格----添加，删除
表格----排序
表单----常用属性
表单----事件
表单---校验
DOM高级的更多相关文章
- JavaScript DOM高级程序设计 7.向应用程序加入Ajax--我要坚持到底！
有时候,或许是因为理解能力,也或许是因为浮躁,看东西总是不入心,而且还老是想跳过本节,或者赶紧看完本节,这样的恶性循环,让我在即没有真正的学习到知识,又打击我的学习信心,还浪费了我很多事件,我想,当遇 ...
- JavaScript DOM高级程序设计 5动态修改样式和层叠样式表2--我要坚持到底！
把样式置于DOM脚本之外 style属性 我们可以这样设置前景色之类的属性: element.style.color='red'; 也可以使用下面的代码设置背景颜色: element.style.ba ...
- JavaScript DOM高级程序设计 5动态修改样式和层叠样式表1（源代码）--我要坚持到底！
W3C DOM2样式规范 现在这边贴出本章要的源代码,注意要结合前面用到的ADS库http://vdisk.weibo.com/s/Dq8NU CSSStyleSheet对象属性: type :始终是 ...
- JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！
一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...
- JavaScript DOM高级程序设计 3.6 实例 将HTML代码转换成DOM代码（附源码）--我要坚持到底！
作为一名Web开发者,最讨厌的事情就是重复性任务,摆脱乏味的日常重复性事物的一种方法,是借助可重用的对象或者说与你现在建立的ADS库类似的库,另外一种让事情变得有意思,且能够加速开发进程的方式是编写能 ...
- JavaScript DOM高级程序设计 3.-DOM2和HTML2--我要坚持到底！
由一个HTML进行说明,我就不敲了,直接copy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...
- JavaScript DOM高级程序设计 2.4-try{}catch{}--我要坚持到底！
先看一段有异常的语句 var sound = 'Roar!'; function myOrneryBeast() { this.style.color='green';//window没有style属 ...
- JavaScript DOM 高级程序设计读书笔记二
响应用户操作和事件 事件就是操作检测与脚本执行的组合,或者基于检测到的操作类型在某个对象上调用事件侦听器(事件处理程序). 事件的类型 事件可以分为几种类型:对象事件,鼠标事件,键盘事件(只适用于do ...
- JavaScript DOM 高级程序设计读书笔记一
创建可重用的对象 简而言之,对象就是包含一组变量(称为属性)和函数(称为方法)的集合的实例.对象通常由类派生而来,而类中定义了对象拥有的属性和方法.如果你的脚本中都是对象之间的交互操作,那么就可以称之 ...
随机推荐
- Django笔记-常见错误整理
1.csrf错误 解决方法:在settings.py里注释掉相关内容即可 MIDDLEWARE_CLASSES = ( 'django.contrib.sessions.middleware.Sess ...
- owin
app.Properties["Hello"] = System.DateTime.Now; app.Run(async context => await context.R ...
- java 的 AccessController.doPrivileged使用
AccessController.doPrivileged意思是这个是特别的,不用做权限检查. 在什么地方会用到呢:加入1.jar中有类可以读取一个文件,现在我们要使用1.jar去做这个事情.但是我们 ...
- System.exit(0)和System.exit(1)区别
System.exit(0)是将你的整个虚拟机里的内容都停掉了 ,而dispose()只是关闭这个窗口,但是并没有停止整个application exit() .无论如何,内存都释放了!也就是说连JV ...
- mapreduce 模板
/*** * MapReduce Module * @author nele * */ public class ModuleMapReduce extends Configured implemen ...
- 【转载】android中.9png
在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”.这种图片是用于Android开发的一种特殊的图片格式,它的 ...
- javascript位运算
javascript作为一门高级语言,他尽量让开发人员减少思考底层的硬件工作原理,而将精力集中在逻辑开发的层面.不过,不论这门语言多么高级,我们必须知道数据依然以bits的形式存储,有时候我们会直接与 ...
- js中的换算小技巧
之前自己一直使用~~运算符来把‘112222’字符型的数值换算成整型的数值 但今天调试程序发现了一些问题 ~~'999'=>999 ~~'111111999'=>111111999 这些都 ...
- SQL Server数据库邮件配置
一.数据库邮件介绍 数据库邮件是从SQL Server数据库引擎中发送电子邮件的企业解决方案,通过使用数据库邮件,数据库应用程序可以向用户发送电子邮件.邮件中可以包含查询结果,还可以包含来自网络中任何 ...
- PHP 数组的遍历的几种方式（以及foreach与for/while+each效率的比较）
* 使用foreach遍历数组时要注意的问题: * 1.foreach在遍历之前会自动重置指针使用其指向第一个元素,所以foreach可以多次遍历 * 2.foreach遍历完成之后,指针是没有指向数 ...