动态表格与提交功能实现-优快云博客

<!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 language="javascript">

	var g = 1;
	
	function goto_sumbit() {
		var names = "";
		var table = document.getElementById("dytbody");
		var tags = table.getElementsByTagName("input");
		
		for(var i = 0; i < tags.length; i++) {
			if(tags.item(i).type == "text") {
				names += tags.item(i).name + ",";
			}
		}
		alert(names);
	}
	
	function newInput() {
		//var table = document.getElementById("dytable");
		var tbody = document.getElementById("dytbody");
		var tr = document.createElement('tr');
		var td1 = document.createElement('td');
		var td2 = document.createElement('td');
		var td3 = document.createElement('td');
		
		td1.align = "center";
		td1.innerHTML = "名称" + g + "：";
		td2.innerHTML = "<input type='text' name='name" + g + "' id='name" + g + "' />";
		td3.innerHTML = "<input type='button' value=' 删 除 ' οnclick='deleted(this)'/>";
		
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		
		tbody.appendChild(tr);
		
		//table.appendChild(tbody);
		
		g++;
	}
	
	function deleted(link) {
		var tbody = document.getElementById("dytbody");
		tbody.removeChild(link.parentElement.parentElement); 
	}
</script>
<body>
<input type="button" value=" 添 加 " οnclick="newInput()"/>
<table id="dytable">
	<tbody id="dytbody">
    </tbody>
</table>
<input type="button" value=" 提 交 " οnclick="goto_sumbit()" /><input type="reset" value=" 重 置 " />
</body>
</html>

动态table