html表格的动态增加与删除

html表格的动态增加与删除

<html>

 <head>
  <script>
  function get(event){
   e=event.srcElement;
   if(e.nodeName=="TD"){
    txt="<input type='text' οnblur='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='删除' οnclick='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" οnclick="add();" />
<table id="itable" border="1" οndblclick="get(event);" >
<tr>
<th>选择</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
<th>删除</th>
</tr>
</table>
<input type="button" value="select all" οnclick="selectAll();" />
<input type="button" value="delete all" οnclick="deleteAll();" />
<input type="button" value="select reserve" οnclick="seleteReserve();" />
 </body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值