使用javascript动态添加和删除行

<script type="text/javascript">
   var rnum = 1;
   function add_Row(){
      var newRow=document.all.family.insertRow(-1);
     var newcell=newRow.insertCell() ;
      newRow.bgColor='#FFFFFF';
      newcell.align='left';
      newcell.innerHTML="<input type='text' name='t1'/><input type='button' value='删除' onClick='deleteCurrentRow()'>";
      rnum++;
      document.all.family.focus();
     }
     //删除当前行
   function deleteCurrentRow(){
    //srcElement:设置或获取触发事件的对象
       var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;
       document.all.family.deleteRow(currRowIndex);//table10--表格id
   }
    </script>
  </head>
  <body>
   <p align="center">
    <input type="button" onclick="add_Row();" value="测试"/>
    </p>
    <table id="family" align="center">
    </table>
  </body>

兼容火狐和IE的动态table:

	//动态添加行
			function insertRow(tbIndex,content)
			{
				 var objRow =  document.getElementById("tablecoc").insertRow(tbIndex);
				 var objCel = objRow.insertCell(0);
				 objCel.innerHTML=content;
			}
			//清空所有行
			function deleteRow(){
				 var tab = document.getElementById("tablecoc") ;
				 for (var i=0; i < tab.rows.length; i++){
				     for (var j=0;j< tab.rows.item(i).cells.length;j++) {
				      tab.rows.item(i).cells[j].innerHTML = "";
				     }
				 }
			}
 

你可能感兴趣的:(JavaScript)