*01-DOM(示例-邮件列表)
------------------小结------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="table.css"/>
<style type="text/css">
.one{
background-color:#9bf7d5;
}
.two{
background-color:#f3e99a;
}
.over{
background-color:#ef7125;
}
</style>
<script type="text/javascript">
//行颜色间隔显示功能。
var name;
function trColor(){
//1,获取表格对象。
var oTabNode = document.getElementById("mailtable");
//2，获取行对象。
var collTrNodes = oTabNode.rows;
//3，对所有需要设置背景的行对象进行遍历。
for(var x=1; x<collTrNodes.length-1;x++){
if(x%2==1){
collTrNodes[x].className = "one";
}else{
collTrNodes[x].className = "two";
}
collTrNodes[x].onmouseover = function(){
name = this.className;
this.className = "over";
}
collTrNodes[x].onmouseout = function(){
this.className = name;
}
}
}
onload = function(){
trColor();
}
//复选框的全选动作。
function checkAll(node){
//获取所有的mail复选框。
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x<collMailNodes.length; x++){
collMailNodes[x].checked = node.checked;
}
}
//定义操作复选框按钮的方法。
function checkAllByBut(num){
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x<collMailNodes.length; x++){
if(num>1)
collMailNodes[x].checked = !collMailNodes[x].checked;
else
collMailNodes[x].checked = num;
}
}
//删除所选邮件。
function deleteMail(){
if (!confirm("你真的要删除所选的邮件吗？")){
return;
}
//获取所有的mail节点
var collMailNodes = document.getElementsByName("mail");
for (var x = 0; x < collMailNodes.length; x++) {
if (collMailNodes[x].checked) {
var oTrNode = collMailNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
x--;
}
}
trColor();
}
</script>
</head>
<body>
<table id="mailtable">
<tr>
<th>
<input type="checkbox" name="all" οnclick="checkAll(this)" />全选
</th>
<th>
发件人
</th>
<th>
邮件名称
</th>
<th>
邮件附属信息
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11
</td>
<td>
我是邮件11
</td>
<td>
我是附属信息11
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三22
</td>
<td>
我是邮件22
</td>
<td>
我是附属信息22
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三33
</td>
<td>
我是邮件33
</td>
<td>
我是附属信息33
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三44
</td>
<td>
我是邮件44
</td>
<td>
我是附属信息44
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三55
</td>
<td>
我是邮件55
</td>
<td>
我是附属信息55
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三66
</td>
<td>
我是邮件66
</td>
<td>
我是附属信息66
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三117
</td>
<td>
我是邮件117
</td>
<td>
我是附属信息17
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三118
</td>
<td>
我是邮件118
</td>
<td>
我是附属信息118
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三119
</td>
<td>
我是邮件119
</td>
<td>
我是附属信息119
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三1100
</td>
<td>
我是邮件110
</td>
<td>
我是附属信息110
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11a
</td>
<td>
我是邮件11a
</td>
<td>
我是附属信息11a
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11b
</td>
<td>
我是邮件11b
</td>
<td>
我是附属信息1b1
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11c
</td>
<td>
我是邮件11c
</td>
<td>
我是附属信息11c
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11d
</td>
<td>
我是邮件11d
</td>
<td>
我是附属信息11d
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11e
</td>
<td>
我是邮件11e
</td>
<td>
我是附属信息11e
</td>
</tr>
<tr>
<th>
<input type="checkbox" name="all" οnclick="checkAll(this)" />全选
</th>
<th colspan="3">
<input type="button" value="全选" οnclick="checkAllByBut(1)" />
<input type="button" value="取消全选" οnclick="checkAllByBut(0)" />
<input type="button" value="反选" οnclick="checkAllByBut(2)" />
<input type="button" value="删除所选附件" οnclick="deleteMail()" />
</th>
</tr>
</table>
</body>
</html>
*02-DOM(示例-调查问卷)
----------小结----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
#contentid{
display:none;
}
#no1ul{
list-style:none;
margin:0px;
}
.close{
display:none;
}
.open{
display:block;
}
</style>
<script type="text/javascript">
function showResult(){
//1,判断是否有答案被选中。
//获取所有no1的radio。并遍历判断checked状态。
var oNo1Nodes = document.getElementsByName("no1");
var flag = false;
var val;
for(var x=0; x<oNo1Nodes.length; x++){
if(oNo1Nodes[x].checked){
flag = true;
val = oNo1Nodes[x].value;
break;
}
}
if(!flag){
// alert("")
document.getElementById("errinfo").innerHTML = "没有任何答案被选中".fontcolor("red");
return;
}
if(val>=1 && val<=3){
document.getElementById("res_1").className = "open";
document.getElementById("res_2").className = "close";
}
else{
document.getElementById("res_1").className = "close";
document.getElementById("res_2").className = "open";
}
}
</script>
</head>
<body>
<!--
单选按钮演示。
1，是否参与调查问卷？
2，性格测试。
-->
<!--2，性格测试。-->
<h2>欢迎您参与性格测试：</h2>
<div>
<h3>第一题：</h3>
<span>您喜欢的水果是什么？</span>
<ul id="no1ul">
<li><input type="radio" name="no1" value="1" />葡萄</li>
<li><input type="radio" name="no1" value="2" />西瓜</li>
<li><input type="radio" name="no1" value="3" />苹果</li>
<li><input type="radio" name="no1" value="4" />芒果</li>
<li><input type="radio" name="no1" value="5" />樱桃</li>
</ul>
</div>
<div>
<input type="button" value="查看测试结果" οnclick="showResult()" />
<span id="errinfo"></span>
<div id="res_1" class="close">1-3分：你的性格内向并扭曲，建议...</div>
<div id="res_2" class="close">4分以上：你的性格外向并分裂，建议...</div>
</div>
<hr/>
<script type="text/javascript">
function showContent(node){
var oDivNode = document.getElementById("contentid");
with(oDivNode.style){
if(node.value=='yes'){
display = "block";
}else{
display = "none";
}
}
}
</script>
<!--问卷调查-->
<div>
您要参与问卷调查吗：
<input type="radio" name="wenjuan" value="yes" οnclick="showContent(this)" />是
<input type="radio" name="wenjuan" value="no" checked="checked" οnclick="showContent(this)" />否
</div>
<div id="contentid">
问卷调查内容：<BR/>
您的姓名：<input type="text" /><br>
您的邮箱：<input type="text" />
</div>
</body>
</html>
*03-DOM(示例-性格测试)
代码见上，。
*04-DOM(示例-下拉菜单-选择颜色)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style tyle="text/css">
.clrclass{
height:50px;
width:50px;
float:left;
margin-right:30px;
}
#text{
clear:left;
margin-top:20px;
}
.selClass{
width:100px;
}
</style>
</head>
<body>
<!--
-->
<script type="text/javascript">
function changeColor(node){
var colorVal = node.style.backgroundColor;
document.getElementById("text").style.color = colorVal;
}
</script>
<div class="clrclass" id="clr1" style="background-color:red" οnclick="changeColor(this)"></div>
<div class="clrclass" id="clr2" style="background-color:green" οnclick="changeColor(this)"></div>
<div class="clrclass" id="clr3" style="background-color:blue" οnclick="changeColor(this)"></div>
<div id="text">
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
</div>
<hr/>
<script type="text/javascript">
function changeColor2(){
var oSelectNode = document.getElementsByName("selectColor")[0];
//获取所有的option。
/*with (oSelectNode) {
var collOptionNodes = options;
alert(options[selectedIndex].innerHTML);
}*/
var colorVal = oSelectNode.options[oSelectNode.selectedIndex].value;
document.getElementById("text").style.color = colorVal;
// for(var x=0;x<collOptionNodes.length; x++){
// alert(collOptionNodes[x].innerHTML);
// }
}
</script>
<select name="selectColor" οnchange="changeColor2()">
<option value="black">选择颜色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<select name="selectColor2" οnchange="changeColor3()" class="selClass">
<option style="background-color:black" value="black">选择颜色</option>
<option style="background-color:red" value="red"></option>
<option style="background-color:green" value="green">绿色</option>
<option style="background-color:blue" value="blue">蓝色</option>
</select>
</body>
</html>
*05-DOM(示例-下拉菜单-选择城市)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
select{
width:100px;
}
</style>
</head>
<body>
<script type="text/javascript">
function selectCity(){
var collCities = [['选择城市']
,['海淀区','朝阳区','东城区','西城区']
,['济南','青岛','烟台','威海']
,['沈阳','大连','鞍山','抚顺']
,['石家庄','保定','邯郸','廊坊']];
// var arr = {"beijing":['海淀区','朝阳区','东城区','西城区']};
//获取两个下拉菜单对象。
var oSelNode = document.getElementById("selid");
var oSubSelNode = document.getElementById("subselid");
//获取到底选择的是哪个省。
var index = oSelNode.selectedIndex;
//通过角标到容器去获取对应的城市数组。
var arrCities = collCities[index];
//将子菜单中的内容清空一下。
// for(var x=0;x<oSubSelNode.options.length; ){
// oSubSelNode.removeChild(oSubSelNode.options[x]);
// }
//清除动作
oSubSelNode.length = 0;
//遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
for(var x=0; x<arrCities.length; x++){
var oOptNode = document.createElement("option");
oOptNode.innerHTML = arrCities[x];
oSubSelNode.appendChild(oOptNode);
}
}
</script>
<select id="selid" οnchange="selectCity()">
<option>选择省市</option>
<option value="beijing">北京</option>
<option>山东</option>
<option>辽宁</option>
<option>河北</option>
</select>
<select id="subselid">
<option>选择城市</option>
</select>
</body>
</html>
*06-DOM(示例-添加删除附件)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
table a:link,table a:visited{
color:#179ed9;
text-decoration:none;
}
table a:hover{
color:#f36021;
}
</style>
<script type="text/javascript">
function addFile(){
/*
* 因为文件选取框定义在行对象中。
* 所以只要给表格创建新的行和单元格即可。
*/
var oTabNode = document.getElementById("fileid");
var oTrNode = oTabNode.insertRow();
var oTdNode_file = oTrNode.insertCell();
var oTdNode_del = oTrNode.insertCell();
oTdNode_file.innerHTML = "<input type='file' />";
// oTdNode_del.innerHTML = "<a href='javascript:void(0)' οnclick='deleteFile(this)'>删除附件</a>";
oTdNode_del.innerHTML = "<img src='1.jpg' alt='删除附件' οnclick='deleteFile(this)' />";
}
function deleteFile(node){
var oTrNode = node.parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
}
</script>
</head>
<body>
<table id="fileid">
<tr>
<td><a href="javascript:void(0)" οnclick="addFile()">添加附件</a></td>
</tr>
<!--tr>
<td><input type="file" /> </td>
<td><a href="javascript:void(0)">删除附件</a></td>
</tr-->
</table>
</body>
</html>
*07-DOM(示例-表单校验-涉及的事件和信息提示方式)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--
表单校验。
-->
<script type="text/javascript">
/*
//校验用户名
function checkUser(){
var flag;
var oUserNode = document.getElementsByName("user")[0];
var name = oUserNode.value;
//定义正则表达式8
var reg = new RegExp("^[a-z]{4}$","i");//必须是四个字母。
// reg = new RegExp("^\\d{4}$");// 必须是四个数字。
// reg = /^\d{4}$/;
var oSpanNode = document.getElementById("userspan");
// if(name=="abc"){
if(reg.test(name)){
oSpanNode.innerHTML = "用户名正确".fontcolor("green");
flag = true;
}else{
oSpanNode.innerHTML = "用户名错误".fontcolor("red");
flag = false;
}
return flag;
}
*/
/*
* 发现很多框的校验除了几个内容不同外，校验的过程是一样的。
* 所以进行了代码的提取。
*
*/
function check(name,reg,spanId,okinfo,errinfo){
var flag;
var val = document.getElementsByName(name)[0].value;
var oSpanNode = document.getElementById(spanId);
if(reg.test(val)){
oSpanNode.innerHTML = okinfo.fontcolor("green");
flag = true;
}else{
oSpanNode.innerHTML = errinfo.fontcolor("red");
flag = false;
}
return flag;
}
//校验用户名。
function checkUser(){
var reg = /^[a-z]{4}$/i;
return check("user",reg,"userspan","用户名正确","用户名错误");
}
//校验密码；
function checkPsw(){
var reg = /^\d{4}$/;
return check("psw",reg,"pswspan","密码格式正确","密码格式错误");
}
//校验确定密码。只要和密码一致即可。
function checkRepsw(){
var flag;
//获取密码框内容。
var pass = document.getElementsByName("psw")[0].value;
//获取确认密码框内容。
var repass = document.getElementsByName("repsw")[0].value;
//获取确认密码的span区域。
var oSpanNode = document.getElementById("repswspan");
if(pass==repass){
oSpanNode.innerHTML = "两次密码一致".fontcolor("green");
flag = true;
}else{
oSpanNode.innerHTML = "两次密码不一致".fontcolor("red");
flag = false;
}
return flag;
}
//校验邮件
function checkMail(){
var reg = /^\w+@\w+(\.\w+)+$/i;
return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");
}
// 提交事件处理。
function checkForm(){
// alert(checkUser() +"--"+ checkPsw() +"--"+ checkRepsw() +"--"+ checkMail());
if(checkUser() && checkPsw() && checkRepsw() && checkMail())
return true;
return false;
}
function mySubmit(){
var oFormNode = document.getElementById("userinfo");
oFormNode.submit();
}
</script>
<form id="userinfo" οnsubmit="return checkForm()">
用户名称：<input type="text" name="user" οnblur="checkUser()" />
<span id="userspan"></span>
<br/>
输入密码：<input type="text" name="psw" οnblur="checkPsw()" />
<span id="pswspan"></span>
<br/>
确定密码：<input type="text" name="repsw" οnblur="checkRepsw()" />
<span id="repswspan"></span>
<br/>
邮件地址：<input type="text" name="mail" οnblur="checkMail()" />
<span id="mailspan"></span>
<br/>
<input type="submit" value="提交数据" />
</form>
<hr/>
<!--自定提交按钮-->
<input type="button" value="我的提交" οnclick="mySubmit()" />
</body>
</html>
*08-DOM(示例-表单校验-涉及的正则校验)
*09-DOM(示例-表单校验-表单提交的两种方式)
*10-DOM(示例-表单校验-涉及的正则校验)
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
