javaScript学习DOM案例1

 注册后创建表格并显示相应的数据 显示简单的删除操作：

 

 

function showInfo() {
		
		var tbb = document.createElement("table");
		tbb.align = "center" ;
		tbb.width = "80%" ;	
		tbb.border = "1" ;
		tbb.id = "ta" ;
		var tb = document.createElement("tbody");
		
		var tr1 = document.createElement("tr");
		var td1 = document.createElement("td");
		var td2 = document.createElement("td");
		var td3 = document.createElement("td");
		var a1 = document.createElement("a");
		a1.href = "#";
		a1.onclick = delUser ;
		var nameText = document.createTextNode(document.getElementById("userName").value);
		var passwordText = document.createTextNode(document.getElementById("password").value);
		var aText = document.createTextNode("删除");

		a1.appendChild(aText);
		
		td1.appendChild(nameText);
		td2.appendChild(passwordText);
		td3.appendChild(a1);
		
		tr1.appendChild(td1);
		tr1.appendChild(td2);
		tr1.appendChild(td3);
		
		tb.appendChild(tr1);
		tbb.appendChild(tb);
		document.body.appendChild(tbb);
		
	}
	function delUser() {
		//字段.父亲(-->td).父亲(-->tr).父亲(-->table)
		var mytr = this.parentNode.parentNode;
		
		if(confirm("你确定要删除"+mytr.firstChild.firstChild.nodeValue+"吗?")){
			mytr.parentNode.removeChild(mytr);
		}
	}

 

<form name="form1" id="form1">
	<table align="center" border="0">
		<tr>
			<td>用户名：</td> <td><input type="text" id="userName"/></td>
			<td><div id="errorName"></div></td>
		</tr>
		<tr>
			<td>密码：</td> <td><input type="password" id="password"/></td>
			<td><div id="errorPassword"></div></td>
		</tr>
		<tr>
			<td colspan="3"><input type="button" value="注册" onclick="showInfo()"/> <input  type="reset" value="重置"/></td>
		</tr>
	</table>
	</form>