`

动态添加删除table

    博客分类:
  • js
阅读更多
<!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>
</head>
<script type="text/javascript" >
var  n  =   1 ;
  function  testAdd()
    {
      var  tr  =  document.getElementById( "xxx" ).insertRow( 1 );
    tr.id = " new_ " + n;
      var  c1  =  tr.insertCell();
     c1.innerText = " xxx " + n;
      var  c2  =  tr.insertCell();
     c2.innerText = " bbb " ;
  
      var  c3  =  tr.insertCell();
    	 c2.innerText = " EE " ;
     n ++ ;    
 } 
  function  doDelete(i)
  {
    var _tableObj = document.getElementById("xxx"); 	
	 var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;  
   _tableObj.deleteRow(rowIndex);
  
 } 
</script>
<body>  
  <input name="" type="button" onclick = " testAdd() "  value="+"/>
  <input name="" type="button" onclick = " doDelete() "  value="-"/>
  <table width="100%" border="1" cellspacing="0" cellpadding="0" id="xxx">
  <tr id="xxx">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

</body>
</html>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics