<转>HTML的table动态加入行

HTML的table动态加入行，代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
 <head>
  <script>
  function get(event){
   e=event.srcElement;
   if(e.nodeName=="TD"){
    txt="<input type='text' onblur='set(event)' size='5' value='"+e.innerHTML+"'/>";
    e.innerHTML=txt;
    e.firstChild.focus();
   }
  }
  function set(event){
   e=event.srcElement;
   if(e.nodeName=="INPUT"){
    txt=e.value;
    e.parentNode.innerHTML=txt;
   }
  }

  function add(){
   var tr1=document.getElementById('itable').insertRow();
   var c0=tr1.insertCell(0);
   var c1=tr1.insertCell(1);
   var c2=tr1.insertCell(2);
   var c3=tr1.insertCell(3);
   var c4=tr1.insertCell(4);
   c0.innerHTML="<input type='checkbox' name='ck'/>";
   c1.innerHTML=document.getElementById("name").value;
   c2.innerHTML=document.getElementById("age").value;
   c3.innerHTML=document.getElementById("score").value;
   c4.innerHTML="<input type='button' value='删除' onclick='del(this)";   
  }
  function del(r){
   var i=r.parentNode.parentNode.rowIndex;
   document.getElementById('itable').deleteRow(i);
  }

  function seleteReserve(){
   var ch=document.getElementsByName('ck');
   for(i=ch.length-1;i>=0;i--){
    if(ch[i].checked==true){
     ch[i].checked=false;
    }else{ 
     ch[i].checked=true;
    }
   }
  }
  function deleteAll(){
   var flag=0;
   var tb=document.getElementById('itable');
   var ch=document.getElementsByName('ck');
   for(i=ch.length-1;i>=0;i--){
    var tr=ch[i].parentNode.parentNode;
    var index=tr.rowIndex;
    if(ch[i].checked==true){
     tb.deleteRow(index);
     flag=flag+1;
    }
   }
   if(flag<=0){
    alert("请选定要删除的行！");
   }
  }

  function selectAll(){
   var ch=document.getElementsByName('ck');
   for(i=ch.length-1;i>=0;i--){ 
    ch[i].checked=true;
   }
  }

  </script>
 </head>
 <body>
name:<input type="text" id="name" size='5'/>
age:<input type="text" id="age" size='5' />
score:<input type="text" id="score" size='5'/>
<input type="button" value="insert" onclick="add();" />
<table id="itable" border="1" ondblclick="get(event);" >
<tr>
<th>选择</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
<th>删除</th>
</tr>
</table>
<input type="button" value="select all" onclick="selectAll();" />
<input type="button" value="delete all" onclick="deleteAll();" />
<input type="button" value="select reserve" onclick="seleteReserve();" />
 </body>
</html>

 

 

posted @ 2013-10-24 15:12  BaronZ  阅读(348)  评论(0)  编辑  收藏  举报