第一:基本概念
第一:实现表单验证:提示内容(span)写在表单上,最好不写在javascript中。
2.正则表达式:
创建表达式的方式一:var reg=new REgExp(“[a-z]{6,}”)
创建表达式的方式二:var reg=/“[a-z]{6,}”/
---test()方法:规则匹配内容。
----/表达式/:表示符合条件就停止了,例如验证密码至少六位,验证到第六位就不在往后验证了
----/^表达式$/:表示从开始一直验证到最后。
3.display的属性:none是不显示,block是显示,inline是显示并且不换行
4.直接点击按钮可以进行表单验证,在失去焦点的时候也可以进行表单验证:onfouse()获得焦点 onblue失去焦点
第二:表单的级联操作:省份里的值提前写好,城市里面的值动态显示。onchange():内容改变的时候调用这个函数。option表示选项
1.下拉列表框select中的属性1:selectedindex:设置或者获取选中选项的位置(也就是获取索引,因为一个下拉表就是个集合,集合的索引下标从0开始)
2.下拉表select中属性2:length:设置或者获取集合的长度
3.下拉表select的方法:add():添加一个元素,是select对象的方法
4.选项option的方法:创建option对象,然后add,就会添加一个选项。var op=new Option("标签中间的内容","value的值")
第三:document的常用方法
1.write():输出一个html内容
2.createElemet():创建元素对象(标签)。带create的说明是只有document对象才有的方法
3.createTextNode():创建文本对象(内容)。文本对象是元素对象里面的内容。带create的说明是只有document对象才有的方法
4.所有标签都有appendChild()方法,是追加的意思:给某个节点添加子节点
5.createTextNode():创建一个文本节点,也就是用来写内容的
6.removeNode(true):任何标签(节点)都有这个方法。删除节点,参数默认是false,如果写成true表示把这个节点的子节点也删掉。
第二:代码实现
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>
<style type="text/css">
#showvalue{
border:#0CF solid 2px;
background-color:#99F;
}
</style>
<script type="text/javascript">
function changecity(){
var p=document.getElementById("province");
var c=document.getElementById("city");
c.length=0;//每次使用前先清零
var message=new Option("请选择",-1);
c.add(message);
var cityList=[["海淀区","朝阳区","房山区","通州区","大兴区"],["宝坻区","西青区","滨海西区","河西区","河东区","东丽区","南开区","武清区"],
["石家庄","保定市","沧州市","邯郸市","廊坊市"]];
var cityindex=p.selectedIndex-1;//这是针对第一个下拉列表和上面的cityList的,下拉列表中的第二个是北京,对应着cityList的第一个的各个区,因此要减1
for(var x=0;x<cityList[cityindex].length;x++){//当第一个下拉列表选择了之后,会遍历上面的cityList。例如选择北京之后遍历海淀区朝阳区.....
var opt=new Option(cityList[cityindex][x],cityList[cityindex][x]);//创建下拉列表的选项,第一个参数是起始标签和结束标签之间的内容,第二个参数表示的是选项的value值
c.add(opt);//add方法用来在下拉列表中添加option选项
}
}
function showMessage(){
var pvalue=document.getElementById("province").value;
var cvalue=document.getElementById("city").value;
var textvalue=document.getElementById("showvalue");
textvalue.value="我来自:"+pvalue+" "+cvalue;
}
</script>
</head>
<body>
<!---
思路:1.选择省份的时候就会触发onchange事件,调用changecity函数,这个函数里面动态生成城市,因此把城市的名字都写在了changecity函数中,
省份和城市之间的联系是通过索引联系起来的,即:省份的索引-1等于城市的索引(因为省份这个下拉列表中的第一个位置是“请选择省份”,这个位置被占用了,因此比城市多1)
2.在产生城市的时候,是通过add添加下拉列表中的城市的,因此用for循环遍历该省份的城市,并实现添加。(在循环添加城市之前,先来个普通添加,添加的是一个“请选择”,不加也行 ,这个只是个优化)
-->
<select name="province" id="province" onchange="changecity()">
<option value="-1" selected="selected">--请选择省份--</option>
<option value="北京市">北京市</option>
<option value="天津市">天津市</option>
<option value="河北省">河北省</option>
</select>
<select name="city" id="city" onchange="showMessage()">
<option value="-1" selected="selected">--请选择城市--</option>
</select>
<input type="text" value="" id="showvalue"/>
</body>
</html>
2.表单验证的实现
<!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>
<style type="text/css">
.isnull,.checkerror{
color:#F00;
font-size:18px;
display:none;
}
.ok{
color:#0F0;
font-size:18px;
display:none;
}
</style>
<script type="text/javascript">
function checkname(){
var uname=document.myform.uname.value;//找到文本框中输入的值
var a=document.myform.uname;//找到文本框对象,因为focus() 方法和select方法要用
var span1=document.getElementById("isnull");
var span2=document.getElementById("checkerror");
var span3=document.getElementById("ok");
if(uname==""){
span1.style.display="inline";
span2.style.display="none";
span3.style.display="none";
return false;
}
var reg=/^[a-zA-Z]{6,}$/;//正则第一种方式。注意:^$的作用:这个表示从正则表达式的开始位置到结束位置都会进行验证。如果不加这两个符号则前面匹配成功之后就不会看下面的内容了。
if(!reg.test(uname)){
span2.style.display="inline";
span1.style.display="none";
span3.style.display="none";
a.focus() ;//获得焦点的方法,输入的不正确,就获得焦点,也就是获得鼠标的光标,此时如果不输入正确,则无法向下进行操作
a.select();//选中内容的方法:选中文本框中错误内容
return false;
}
span3.style.display="inline";
span1.style.display="none";
span2.style.display="none";
return true;
}
function checkpass(){
var u = document.myform.upass.value;
var a = document.myform.upass;
var span1=document.getElementById("pisnull");
var span2=document.getElementById("pcheckerror");
var span3=document.getElementById("pok");
if(u.length==0){
span1.style.display="inline";
span3.style.display="none";
span2.style.display="none";
return false;
}
var reg=new RegExp("^[^(a-zA-Z0-9)]{6}$");//正则第二种方式
if(!reg.test(u)){
span1.style.display="none";
span2.style.display="inline";
span3.style.display="none";
a.focus();
a.select();
return false;
}
span1.style.display="none";
span2.style.display="none";
span3.style.display="inline";
return true;
}
function checkmyname(){
var my=document.myform.myname.value;
var a=document.myform.myname;
var span1=document.getElementById("myisnull");
var span2=document.getElementById("mycheckerror");
var span3=document.getElementById("myok");
if(my.length==0){
span1.style.display="inline";
span3.style.display="none";
span2.style.display="none";
return false;
}
var reg_name=/^[\u4e00-\u9fa5]{2,4}$/;
if(!reg_name.test(my)){//如果不匹配
span1.style.display="none";
span2.style.display="inline";
span3.style.display="none";
a.focus();
a.select();
return false;
}
span1.style.display="none";
span2.style.display="none";
span3.style.display="inline";
return true;
}
function check(){
if(checkname()&&checkpass()&&checkmyname()){
return true;
}
return false ;
}
</script>
</head>
<!---属性display有三个值:none表示隐藏,block表示显示,inline表示显示并且不换行--->
<!---onblur事件表示鼠标失去焦点,也就是鼠标离开的时候被触发--->
<body>
<form action="创建节点.html" name="myform" onsubmit="return check()">
用 户 名: <input type="text" name="uname" onblur="checkname()"/>
<span id="isnull" class="isnull">用户名不能为空</span>
<span id="checkerror" class="checkerror">用户名必须为字母,并且至少六位</span>
<span id="ok" class="ok">用户名输入正确</span><br />
密 码: <input type="text" name="upass" onblur="checkpass()"/>
<span id="pisnull" class="isnull">密码不能为空</span>
<span id="pcheckerror" class="checkerror">密码不符合要求,密码必须是特殊字符并且为六位</span>
<span id="pok" class="ok">密码输入正确</span><br />
真实姓名: <input type="text" name="myname" onblur="checkmyname()"/>
<span id="myisnull" class="isnull">姓名不能为空</span>
<span id="mycheckerror" class="checkerror">姓名必须是两至四个汉字</span>
<span id="myok" class="ok">姓名输入正确</span><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
3.绝对定位+菜单栏+冒泡事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
#adv {
height: 80px;
width: 80px;
background-image: url(adv.jpg);
background-repeat: no-repeat;
position: absolute;
left: 130px;
top: 104px;
border: 1px solid #C00;
}
</style>
<script type="text/javascript">
window.onload=function(){//跟随屏幕滚动的图片
window.onscroll = move;
}
function move(){ //scrollTop是指滚动条 的垂直位置
document.getElementById("adv").style.top = (document.documentElement.scrollTop + 104)+'px';
}
function open_fix_adv(){//打开新窗口,地址栏
var openadv= window.open("adv.html","","height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0");
}
function lclose(e){
document.getElementById("adv").style.visibility = "hidden";//visibility是css帮助文档,与display不同,visibility是隐藏对象所占据的物理空间
e.cancelBubble=true;//冒泡事件(js第四课),阻止冒泡,取消冒泡=是
// a.style.display = "hidden";
}
function func(e){
alert(e.clientX+":"+e.clientY);
}
//onmouseout当鼠标离开的时候 onmousemove鼠标移除时
</script>
</head>
<body >
<div id="adv" class="a" onclick="open_fix_adv()">
<img src="close.gif" width="15" height="15" onclick="lclose(event)" style="float:right"/>
</div>
<div style="height: 1800px;width: 400px;background-color: gray;" onclick="func(event);">
</div>
</body>
</html>
4.定时器:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<!--
window对象有两个方法与动画有关:
(1)setInterval("任务","多长时间执行一次任务);
(2)setTimeout("任务","多长时间之后执行任务");
任务常常是匿名函数。
-->
<title>练习.html</title>
<script type="text/javascript">
var h=10;//高度的增加量,是给move方法的
function move(){ //移动的方法
var obj=document.getElementById("a");
//alert(obj);
var aaa=obj.style.height;
//alert(aaa);
aaa=parseInt(h)+parseInt(aaa);
//alert(h);
obj.style.height=aaa;
}
function func(){
var ss=setInterval("move()",1000);
setTimeout(function(){
clearInterval(ss);
}, 8000);
}
</script>
</head>
<body onload="func()">
<div id="a" style="height:10px;width:200px;background-color: aqua;">
</div>
<input type="submit" value="点击" onclick="move()">
</body>
</html>
5.时钟
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript">
function a(){
var today = new Date(); //获得当前时间
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();
var ss = today.getSeconds();
var ff=today.getFullYear();//获得年份
var MM=today.getMonth()+1;
var DD=today.getDate();
var D=today.getDay();//星期几
switch(D){
case(0):
D="星期日";
break;
case(1):
D="星期一";
break;
case(2):
D="星期二";
break;
case(3):
D="星期三";
break;
case(4):
D="星期四";
break;
case(5):
D="星期五";
break;
case(6):
D="星期六";
break;
}
document.getElementById("myclock").innerHTML="现在时间:"+
ff+"-"+MM+"-"+DD+" "+D+":"+hh+":"+mm+":"+ss;
}
function timer(){
var task=setInterval(a,1000);
}
</script>
</head>
<body onload="timer();">
<div align="center" id="myclock" style="margin-top: 100px"></div>
</body>
</html>
6.使用隐藏和显示实现表单验证
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript">
/**
javascript中正则表达式
/表示式规则/
**/
function checkUname()
{
var pass = document.getElementById("pass");
var notn = document.getElementById("notn");
var regs = document.getElementById("reg");
var uname = document.myform.uname.value;
var reg =/[A-Za-z0-9_]{6,}/; //定义一个正则表达式对象,输入六个1
//var reg = new RegExp("[A-Za-z0-9_]{6,}");
if(uname=="")
{
notn.style.display="inline";
pass.style.display="none";
regs.style.display="none";
return false;
}
if(!reg.test(uname))
{
//alert("用户名只能包含字母,数子和_.....");
regs.style.display="inline";
pass.style.display="none";
notn.style.display="none";
return false;
}
pass.style.display="inline";
notn.style.display="none";
regs.style.display="none";
return true;
}
function checkPwd()
{
var pass = document.getElementById("pwdpass");
var notn = document.getElementById("pwdnotn");
var regs = document.getElementById("pwdreg");
var pwd = document.myform.upwd.value;
var reg=/^[^A-Za-z0-9_]{6}$/;//输入六个!
if(pwd=="")
{
//alert("密码不能为空.....");
notn.style.display="inline";
pass.style.display="none";
regs.style.display="none";
return false;
}
if(!reg.test(pwd))
{
regs.style.display="inline";
pass.style.display="none";
notn.style.display="none";
//alert("用户名不能包含字母,数子和_,而且长度必须是6位");
return false;
}
pass.style.display="inline";
notn.style.display="none";
regs.style.display="none";
return true;
}
function checkForm()
{
if(checkUname()&&checkPwd())
{
return true;
}
return false;
}
</script>
<style type="text/css">
.pass{
color:#00FF00;
font-size:16px;
font-family:"隶书";
display:none;
}
.notn{
color:#FF0000;
font-size:16px;
font-family:"隶书";
display:none;
}
.reg{
color:#FF0000;
font-size:16px;
font-family:"隶书";
display:none;
}
</style>
</head>
<body>
<form name="myform" onsubmit="return checkForm()">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="uname" value="" onblur="checkUname()"/>
<span id="pass" class="pass">验证通过</span>
<span id="notn" class="notn">用户名不能为空....</span>
<span id="reg" class="reg">用户名不能包含字母,数子和_,而且长度必须是6位</span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="upwd" value="" onblur="checkPwd()"/>
<span id="pwdpass" class="pass">验证通过</span>
<span id="pwdnotn" class="notn">密码不能为空....</span>
<span id="pwdreg" class="reg">用户名只能包含字母,数子和_.....</span>
</td>
</tr>
<tr>
<td><input type="submit" name="sub" value=" 提 交 "/></td>
<td><input type="reset" name="res" value=" 重 置 "/></td>
</tr>
</table>
</form>
</body>
</html>
7.图片自动翻转
<html>
<head>
<title>图片显示</title>
<script type="text/javascript">
var arr=["scenic1.jpg","030295F_1.JPG",
"031527F_1.JPG","X`57PI]OVJD)GEP]T9Q{[email protected]"];//全局变量
var index1=arr.length-1;//全局变量
function change(){
index1--;
//通过document对象获得文档中img元素,并设置
//它的src属性指向一张图片,图片的名称使用数组
//进行管理
var imgObj=document.getElementById("img1");
imgObj.src=arr[index1];
if(index1==0){//下标的循环使用
index1=arr.length;
}
}
var success= function(){
var timerID = window.setInterval("change()",1500);
}
</script>
</head>
<body onload="success()">
<img id="img1" alt="风景图片" src="X`57PI]OVJD)GEP]T9Q{[email protected]">
<a href="javascript:change();" onclick="change();"></a>
</body>
</html>
8.给表单添加行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
td{
width: 100px;
}
</style>
<script type="text/javascript" src="../js/prototype-1.6.0.3.js"> </script>
<script type="text/javascript">
function changeBg(){
var trArr=document.getElementsByTagName("tr");
for(var i=1;i<trArr.length;i++){
if(i%2==0){
trArr[i].bgColor="red";
}else{
trArr[i].bgColor="yellow";
}
}
}
function addRow(){
var new_row= $("tb").insertRow($("tb").rows.length);//添加行
var cell1=new_row.insertCell(new_row.cells.length);//添加列
var cell2=new_row.insertCell(new_row.cells.length);
var cell3=new_row.insertCell(new_row.cells.length);
var cell4=new_row.insertCell(new_row.cells.length);
cell1.innerHTML=$F("add_name");
cell2.innerHTML=$F("add_number");
cell3.innerHTML=$F("add_price");
cell4.innerHTML=$F("add_price2");
}
function upcell(param){
var tabobj=document.getElementById("tb").rows.length-1;
var trobj=document.getElementById(param);
var cellobj=trobj.cells[1];
if(trobj.cells[5].lastChild.value=="使用"){
var cellNum=cellobj.innerHTML;
cellobj.innerHTML="<input type='text' size='4' value='"+cellNum+"'id='cell"+trobj.rowIndex+"'/>";
trobj.cells[5].lastChild.value="确定";
}else{
var textId="cell"+trobj.rowIndex;
var cellText=document.getElementById(textId).value;
cellobj.innerHTML=cellText;
trobj.cells[5].lastChild.value="确定";
}
//trobj.cells[3].lastChild.onclick="aaa()";
//alert(trobj.cells[3].lastChild.onclick);
}
</script>
</head>
<body onload="changeBg()">
<table id="tb" align="center" border="1" width="600px">
<tr>
<td>商品名称</td>
<td>数量</td>
<td>原价</td>
<td>现价</td>
<td >
</td>
</tr>
<tr>
<td>男士皮鞋</td>
<td>1</td>
<td>¥888</td>
<td>¥600</td>
<td>
</td>
</tr>
<tr>
<td>时尚衬衣</td>
<td>3</td>
<td>¥234</td>
<td>¥199</td>
<td>
</td>
</tr>
</table>
<form action="服务器的程序" style="margin-left: 200px">
商品名称: <input type="text" name="name" id="add_name"><br>
商品数量: <input type="text" name="number" id="add_number"><br>
商品原价: <input type="text" name="price" id="add_price"><br>
商品现价: <input type="text" name="price2" id="add_price2"><br>
<input type="button" value="添加订单" onclick="addRow();" />
</form>
</body>
</html>
9、添加、删除附件
<!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 type="text/javascript">
var index=0;//定义一个全局变量
function addFile(){
var input=document.createElement("input");
input.type="file";
var a=document.createElement("a");
a.href="javascript:delFile("+index+")";
a.innerHTML="删除附件";
var div2=document.createElement("div");
div2.id=index;
index++;
var div1=document.getElementById("showFile");
div1.appendChild(div2);
div2.appendChild(input);
div2.appendChild(a);
}
function delFile(id){
var div2=document.getElementById(id);
div2.parentNode.removeChild(div2);//找到他的父节点:div2.parentNode,然后通过他的父节点删除他
}
</script>
</head>
<body>
<a href="javascript:addFile()">添加附件</a>
<div id="showFile">
</div>
</body>
</html>
10.对表格进行增删改查
<!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 type="text/javascript">
//隔行换色的函数
function changeColor(){
var mytable=document.getElementById("tb");
var myrows=mytable.rows;
// alert(myrows.length);
for(var x=0;x<myrows.length;x++){
if(x%2==0){
myrows[x].style.backgroundColor="red";
}else{
myrows[x].style.backgroundColor="yellow";
}
}
}
//添加操作
function addRow(){
var table=document.getElementById("tb");
var len= table.rows.length-1;
var input=document.createElement("input");
input.type="checkbox";
input.name="cbox";
input.onclick="shou()";
var td1=document.createElement("td");
td1.appendChild(input);
var td2=document.createElement("td");
td2.innerHTML="第"+len+"行第1列";
var td3=document.createElement("td");
td3.innerHTML="第"+len+"行第2列";
var td4=document.createElement("td");
td4.innerHTML="第"+len+"行第3列";
var tr=document.createElement("tr");
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
table.appendChild(tr);
changeColor();
}
//删除的函数,步骤:1首先找到被选中的复选框,2进行删除
function delRows(){
var cb=document.getElementsByName("cbox");
var indexList=[];//定义一个集合用于接收被选中的复选框的索引
var i=0;//定义一个变量,充当集合中的下标
for(var x=0;x<cb.length;x++){//for循环,作用是找到被选中的复选框
if(cb[x].checked){
indexList[i]=x+2;//如果找到了就往集合中添加。这里本来应该是indexList[i]=x,但是由于限制复选框和表中的行不是一一对应着了(因为表中的第一行没有复选框),因此需要+1. +1之后就又把复选框和表中的行弄成一致的了。不加1表示复选框的索引,+1后表示tr的索引
i++;
}
}
if(indexList.length==0){
alert("请先选择在删除...");
return;//这个就是终止的意思
}
var bool=confirm("确认删除?");
if(bool){
alert("删除成功!");
}else{
alert("删除失败!");
for(var x=0;x<cb.length;x++){
cb[x].checked=false;//设置全部没有被选中
}
return;
}
var table=document.getElementById("tb");
var temp=0;//当删除一行之后,下面的行的索引数将会上移一位,因此需要定义这个变量,作用是跟实际索引保持一致
for(var m=0;m<indexList.length;m++){//这个for循环是删除行
table.deleteRow(indexList[m]-temp);
temp++;
}
changeColor();
}
//修改操作
function updateRow(){
var cbox=document.getElementsByName("cbox");
var table=document.getElementById("tb");
var rows=table.rows;//找到所有行
var arr=0;//定义变量,用于计算没有被选中的个数
var arr2=0;//用于计算被选中的个数
//alert(rows.length);
//当选择多个的时候弹出提示。判断是不是选择的个数是不是大于2,只有个数不大于2的才能进入下面的for循环
for(var x=0;x<cbox.length;x++){
if(cbox[x].checked){
arr2++;
if(arr2>=2){
alert("只能选择一个");
return;
}
}
}
for(var x=0;x<cbox.length;x++){//操作具体要修改的内容,具体的单元格。这是操作正确的情况下,就是选择了一个
if(cbox[x].checked){
var index=x+2;//找到行索引
var row=rows[index];//找到行
var mycells=row.cells;//找到本行的这个单元格,是个集合
// alert(mycells.length);
var mycellobj=mycells[1];//找到具体要修改的单元格
// alert(mycellobj.innerHTML);
var cellNum=mycellobj.innerHTML;
mycellobj.innerHTML="<input type='text' value='"+cellNum+"' size=8 />";
}else{
arr++;
}
//当一个也没有选中的时候,弹出提示
if(arr==rows.length-2){
alert("请先选择在修改...");
return;//这个就是终止的意思
}
}
var r1=rows[0];//找到第一行
var rcells=r1.cells;//找到第一行的所有单元格
// alert(rcells.length);
var aaa=rcells[0].childNodes[5];//找到第一个单元格的最后一个节点,注意两个标签节点之间的空格是个文本节点(空文本节点)
// alert("aaa:"+aaa.innerHTML);
aaa.innerHTML="<a href='javascript:tj()' style='text-decoration:none'>确定</a>";
// alert("aaa:"+aaa.innerHTML);
}
//修改后的确认操作
function tj(){
var cbox=document.getElementsByName("cbox");
var table=document.getElementById("tb");
var rows=table.rows;
for(var x=0;x<cbox.length;x++){
if(cbox[x].checked==true){
var index=x+2;
var row=rows[index];
var mycells=row.cells;
var mycellobj=mycells[1];
var content=mycellobj.childNodes[0].value;
mycellobj.innerHTML=content;
cbox[x].checked=false;//把对勾去掉
}
}
var r1=rows[0];
var rcells=r1.cells;
// alert(rcells.length);
var aaa=rcells[0].childNodes[5];
// alert("aaa:"+aaa.innerHTML);
aaa.innerHTML="<a href='javascript:updateRow()' style='text-decoration:none'>修改</a>";
}
//全选的方法,用于第一个复选框
function quan(){
var mycheckbox=document.getElementsByName("cbox");
var mybox=document.getElementById("box");
for(var x=0;x<mycheckbox.length;x++){
if(mybox.checked==true){
mycheckbox[x].checked=true;
}else if(mybox.checked==false){
mycheckbox[x].checked=false;
}
}
}
//全选的方法,用于超链接
function quan1(){
var mycheckbox=document.getElementsByName("cbox");
var mybox=document.getElementById("box");
for(var x=0;x<mycheckbox.length;x++){
mycheckbox[x].checked=true;
}
mybox.checked=true;
}
//反选
function fan(){
var mycheckbox=document.getElementsByName("cbox");
var mybox=document.getElementById("box");
for(var x=0;x<mycheckbox.length;x++){
if(mycheckbox[x].checked==true){
mycheckbox[x].checked=false;//这是没被选中的
mybox.checked=false;//只要有没被选中的,总复选框就是false
}else{
mycheckbox[x].checked=true;
}
}
}
//取消
function quxiao(){
var mycheckbox=document.getElementsByName("cbox");
var mybox=document.getElementById("box");
for(var x=0;x<mycheckbox.length;x++){
mycheckbox[x].checked=false;
}
mybox.checked=false;
}
//手选,主要控制总的复选框。当下面的复选框有没被选中的时候总复选框也不会被选中。当下面的复选框全部选中的时候总复选框也被选中
/** function shou(){
var mycheckbox=document.getElementsByName("cbox");
//alert(mycheckbox.length);
var mybox=document.getElementById("box");
for(var x=0;x<mycheckbox.length;x++){
if(mycheckbox[x].checked){
mycheckbox[x].checked=true;
//mybox.checked=true;
}else{
mycheckbox[x].checked=false;
}
}
}
*/
</script>
</head>
<body onload="changeColor()">
<table align="center" border="1" id="tb" cellpadding="0" cellspacing="0" >
<tr><td colspan="4" align="center">
<a href="javascript:delRows()" style="text-decoration:none">删除</a>
<a href="javascript:addRow()" style="text-decoration:none">添加</a>
<a href="javascript:updateRow()" style="text-decoration:none">修改</a>
<a href="javascript:quan1()" style="text-decoration:none">全选</a>
<a href="javascript:fan()" style="text-decoration:none">反选</a>
<a href="javascript:quxiao()" style="text-decoration:none">取消</a>
</td></tr>
<tr>
<td><input type="checkbox" id="box" onclick="quan()"/></td>
<td style="color:#F36; text-align:center">姓名</td>
<td style="color:#F36; text-align:center">年龄</td>
<td style="color:#F36; text-align:center">性别</td>
</tr>
<tr>
<td><input type="checkbox" name="cbox" onclick="shou()"/></td>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
</tr>
<tr>
<td><input type="checkbox" name="cbox" onclick="shou()"/></td>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td><input type="checkbox" name="cbox" onclick="shou()"/></td>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
<tr>
<td><input type="checkbox" name="cbox" onclick="shou()"/></td>
<td>第4行第1列</td>
<td>第4行第2列</td>
<td>第4行第3列</td>
</tr>
<tr>
<td><input type="checkbox" name="cbox" onclick="shou()"/></td>
<td>第5行第1列</td>
<td>第5行第2列</td>
<td>第5行第3列</td>
</tr>
<tr>
<td><input type="checkbox" name="cbox" onclick="shou()"/></td>
<td>第6行第1列</td>
<td>第6行第2列</td>
<td>第6行第3列</td>
</tr>
<tr>
<td><input type="checkbox" name="cbox" onclick="shou()"/></td>
<td>第7行第1列</td>
<td>第7行第2列</td>
<td>第7行第3列</td>
</tr>
</table>
</body>
</html>