`

j2ee05,js03,表单验证,级联列表,创建删除节点(添加删除附件),级联列表,对表格增删改查。html和js的帮助文档

    博客分类:
  • j2ee
阅读更多

第一:基本概念

第一:实现表单验证:提示内容(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()">
    用&nbsp;户&nbsp;名: <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 />
   密&nbsp;&nbsp;&nbsp;&nbsp;码: <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{N@H.jpg"];//全局变量
  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{N@H.jpg">
 <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>&yen;888</td>
     <td>&yen;600</td>
     <td>
     </td>
     </tr>
     <tr>
     <td>时尚衬衣</td>
     <td>3</td>
     <td>&yen;234</td>
     <td>&yen;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>

  • chu.zip (466.9 KB)
  • 下载次数: 0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics