【JavaScript】Html表格增加、删除行

MatKK

于 2011-10-26 13:28:40 发布

阅读量768

点赞数

分类专栏： JavaScript 文章标签： javascript html function input button border

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了使用JavaScript创建表格行并实现添加、删除操作的方法，包括插入行、修改输入值和触发事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript:

<script> 
 function doAppend() { 
  var newTr=tabtest.insertRow();
  var newTd = newTr.insertCell();
  newTd.innerHTML='<input type=text><input type="button" value="删除" onClick="del();"><a href="#" onClick="del()" >删除</a>';
 } 
 function del(){
  tabtest.deleteRow(window.event.srcElement.parentElement.parentElement.sectionRowIndex);
 }
 function clickhand() 
 { 
  if(window.event.srcElement.tagName=="INPUT"){ 
   window.event.srcElement.value=window.event.srcElement.parentElement.parentElement.sectionRowIndex 
  }
 }
 document.οnclick=clickhand 
</script>

Html:

<table width="100%" border="0" id="tabtest" > 
 <tr> 
  <td><input type="text"><a href="#" onClick="del()" >删除</a></td>
 </tr> 
 <tr> 
  <td><input type="text"><a href="#" onClick="del()" >删除</a></td>
 </tr> 
 <tr> 
  <td><input type="text"><a href="#" onClick="del()" >删除</a></td>
 </tr> 
</table> 
<div id=a></div> 
<a href="#" οnmοusedοwn=doAppend()>增加行</a> 
<a href="#" onClick="del();">删除行</a>