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>