利用javascript动态添加表格行以及删除表格行

首先先简单创建一个只有一行表格还有一个新增按钮、一个删除按钮。

如图：

对应的html代码：

 
    
    
    
 

 
	 
	 
	
	 

		 

			
选择
			
姓名
			
性别
			
电话
		 
		 


		 
	 
 

 

然后我们编写javascript脚本完成动态增加行的操作：

function createRow(){
	var editTable=document.getElementById("tbody");
	var tr=document.createElement("tr");
	var td0=document.createElement("td");
	var checkbox=document.createElement("input");
	checkbox.type="checkbox";
	checkbox.name="checkRow";
	td0.appendChild(checkbox);
	var td1=document.createElement("td");
	td1.innerHTML="";
	var td2=document.createElement("td");
	td2.innerHTML="a2";
	var td3=document.createElement("td");
	td3.innerHTML="a3";
	tr.appendChild(td0);
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	editTable.appendChild(tr);
}

 

创建tr和td元素，增加行。

效果：

在编写删除按钮的javascript脚本

function delRow(){
	var editTable=document.getElementById("tbody");
	if(confirm("确认删除所选?")){
		var checkboxs=document.getElementsByName("checkRow");
		for(var i=0;i

 

效果：