dtable.txt

该javascript文件可实现来动态添加表格功能。

<script type="text/javascript">   
        //全局变量   
        var i=0;   
        //添加行   
        function addMyRow(){   
            var mytable = document.getElementById("mybody");   
            var mytr = mytable.insertRow();   
            mytr.setAttribute("id","tr"+i);   
            var mytd_1=mytr.insertCell();   
            var mytd_2=mytr.insertCell();   
            var mytd_3=mytr.insertCell();   
            var mytd_4=mytr.insertCell();   
            var mytd_5=mytr.insertCell();   
            mytd_1.innerHTML="<input type='text' name='myname"+i+"'/>";   
            mytd_2.innerHTML="<input type='radio' name='mysex"+i+"' value='1'/>男<input type='radio' name='mysex"+i+"' value='2'/>女";   
            mytd_3.innerHTML="<input type='checkbox' name='mylove"+i+"' value='1'/>上网<input type='checkbox' name='mylove"+i+"' value='2'/>篮球<input type='checkbox' name='mylove"+i+"' value='3'/>游泳";   
            mytd_4.innerHTML="<select name='myjg"+i+"'><option value='1'>北京</option><option value='2'>河北</option><option value='3'>天津</option></select>";   
            mytd_5.innerHTML="<input type='button' value='删除' onclick=\"delMyRow('"+i+"')\"/>";   
            i++;   
        }   
        //删除当前行   
        function delMyRow(j){   
            var mytable = document.getElementById("mybody");   
            var myrow = document.getElementById("tr"+j);   
            mytable.deleteRow(myrow.rowIndex-1);   
        }   
        //删除所有行   
        function delAllMyRow(){   
            var mytable = document.getElementById("mybody");   
            var rowlen=mytable.rows.length;   
            for(var i=rowlen-1;i>=0;i--){   
                mytable.deleteRow(i);   
            }   
        }   
        </script>  

<script type="text/javascript">
		//全局变量
		var i=0;
		//添加行
		function addMyRow(){
			var mytable = document.getElementById("mybody");
			var mytr = mytable.insertRow();
			mytr.setAttribute("id","tr"+i);
			var mytd_1=mytr.insertCell();
			var mytd_2=mytr.insertCell();
			var mytd_3=mytr.insertCell();
			var mytd_4=mytr.insertCell();
			var mytd_5=mytr.insertCell();
			mytd_1.innerHTML="<input type='text' name='myname"+i+"'/>";
			mytd_2.innerHTML="<input type='radio' name='mysex"+i+"' value='1'/>男<input type='radio' name='mysex"+i+"' value='2'/>女";
			mytd_3.innerHTML="<input type='checkbox' name='mylove"+i+"' value='1'/>上网<input type='checkbox' name='mylove"+i+"' value='2'/>篮球<input type='checkbox' name='mylove"+i+"' value='3'/>游泳";
			mytd_4.innerHTML="<select name='myjg"+i+"'><option value='1'>北京</option><option value='2'>河北</option><option value='3'>天津</option></select>";
			mytd_5.innerHTML="<input type='button' value='删除' onclick=\"delMyRow('"+i+"')\"/>";
			i++;
		}
		//删除当前行
		function delMyRow(j){
			var mytable = document.getElementById("mybody");
			var myrow = document.getElementById("tr"+j);
			mytable.deleteRow(myrow.rowIndex-1);
		}
		//删除所有行
		function delAllMyRow(){
			var mytable = document.getElementById("mybody");
			var rowlen=mytable.rows.length;
			for(var i=rowlen-1;i>=0;i--){
				mytable.deleteRow(i);
			}
		}
		</script>


Html代码 
<input type="button" value="添加" onclick="addMyRow();"><input type="button" value="删除所有" onclick="delAllMyRow();">  
        <table border="1">  
            <thead>  
                <tr bgcolor="red">  
                    <td align="center">  
                        姓名   
                    </td>  
                    <td align="center">  
                        性别   
                    </td>  
                    <td align="center">  
                        爱好   
                    </td>  
                    <td align="center">  
                        籍贯   
                    </td>  
                    <td align="center">  
                        操作   
                    </td>  
                </tr>  
            </thead>  
            <tbody id="mybody">  
               
            </tbody>  
        </table>