DOM的小小施用 _Web前端

DOM的小小应用

<html>
? <head>
? <title></title>
? <script type="text/javascript">
? function saveInfo(){
???? var tb???? = document.getElementById("tb");
var mytr?? = document.createElement("tr");
mytr.align = "center";
var mytd1? = document.createElement("td");
var mytd2? = document.createElement("td");
var mytd3? = document.createElement("td");
var name?? = document.createTextNode(document.getElementById("username").value);
var pwd ? ? = document.createTextNode(document.getElementById("userpwd").value);
var del ? ? ? = document.createTextNode("删除");
mytr.appendChild(mytd1);
mytr.appendChild(mytd2);
mytr.appendChild(mytd3);
mytd1.appendChild(name);
mytd2.appendChild(pwd);
var mya =? document.createElement("A");
mya.href="#";
mya.onclick=deleteMe;
mya.appendChild(del);
mytd3.appendChild(mya);
tb.appendChild(mytr);
? }
? function deleteMe(){
???? var mytr = this.parentNode.parentNode;
???? confirm("您确定要删除"+ mytr.firstChild.firstChild.nodeValue +"吗");
mytr.parentNode.removeChild(mytr);
? }
? </script>
? </head>
? <body>
? <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="userpwd"></td>
?????? <td><div id="errorpwd"></div></td>
???? </tr>
???? <tr>
?????? <td colspan="3">
???? <input type="button" value="注册" onClick="saveInfo();">
<input type="reset" value="清除">
?? </td>
???? </tr>
? </table>
? <table align="center" border="1" style="border-collapse:collapse" id="tb">
??? <tr>
?? <td>用户名</td>
?? <td>密码</td>
?? <td>操作</td>
</tr>
? </table>
? </body>
</html>

1 楼 xyztony1985 2011-04-07

啥东西也不说清楚，莫不是要每人都去运行代码？

2 楼 jianson_wu 2011-04-07

差不多那个意思，只是DOM 的几个简单应用，拿出来贴一下，不知道各位在实际应用中是否会用到这些，提些意见

3 楼 dldahua 2011-04-13

恩~~不错，在一些不让用Jquery等框架的变态项目中很有用。
多多学习！

4 楼 faiinlove 2011-04-13

08年刚毕业，不知道有jquery那会，把犀牛书翻了好几遍，写了一整套这种操作dom文档的东东。

5 楼 jianson_wu 2011-04-13

现在jqury很受欢迎，但是看起来都是基于DOM基础上的。。。。。接下来就得看看jquery了，以前接触过后来扔在一旁了。。。。。多谢各位的意见，很给力

6 楼 faiinlove 2011-04-13

jquery就是封装了很多底层dom操作，还有做了夸浏览器兼容处理。
最开始，很抵触jquery，感觉它太大了，我项目中用不了那么多东西。
现在网络好了，感觉都无所谓了。

7 楼 lululu163 2011-05-04

创建tr和td可以直接用

table.insertRow(-1).insertCell(-1);