论坛首页 → Web前端技术论坛 →

DOM的小小应用

浏览 3108 次
锁定老帖子 主题：DOM的小小应用
精华帖 (0) :: 良好帖 (0) :: 新手帖 (2) :: 隐藏帖 (0)
作者 正文
  • jianson_wu
  • 等级: 初级会员
  • 性别:
  • 文章: 18
  • 积分: 40
  • 来自: 广州
   发表时间：2011-04-07  

<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>

 
返回顶楼
         
  • xyztony1985
  • 等级: 初级会员
  • 性别:
  • 文章: 26
  • 积分: 30
  • 来自: 广州
   发表时间：2011-04-07  
啥东西也不说清楚，莫不是要每人都去运行代码？
返回顶楼
          回帖地址
0 请登录后投票
  • jianson_wu
  • 等级: 初级会员
  • 性别:
  • 文章: 18
  • 积分: 40
  • 来自: 广州
   发表时间：2011-04-07  
差不多那个意思，只是DOM 的几个简单应用，拿出来贴一下，不知道各位在实际应用中是否会用到这些，提些意见
返回顶楼
          回帖地址
0 请登录后投票
  • dldahua
  • 等级: 初级会员
  • 性别:
  • 文章: 1
  • 积分: 30
  • 来自: 内蒙古
   发表时间：2011-04-13  
恩~~不错，在一些不让用Jquery等框架的变态项目中很有用。
多多学习！
返回顶楼
          回帖地址
0 请登录后投票
  • faiinlove
  • 等级: 一星会员
  • 性别:
  • 文章: 161
  • 积分: 110
  • 来自: 深圳
   发表时间：2011-04-13  
08年刚毕业，不知道有jquery那会，把犀牛书翻了好几遍，写了一整套这种操作dom文档的东东。
返回顶楼
          回帖地址
0 请登录后投票
  • jianson_wu
  • 等级: 初级会员
  • 性别:
  • 文章: 18
  • 积分: 40
  • 来自: 广州
   发表时间：2011-04-13  
现在jqury很受欢迎，但是看起来都是基于DOM基础上的。。。。。接下来就得看看jquery了，以前接触过后来扔在一旁了。。。。。 多谢各位的意见，很给力
返回顶楼
          回帖地址
0 请登录后投票
  • faiinlove
  • 等级: 一星会员
  • 性别:
  • 文章: 161
  • 积分: 110
  • 来自: 深圳
   发表时间：2011-04-13  
jquery就是封装了很多底层dom操作，还有做了夸浏览器兼容处理。
最开始，很抵触jquery，感觉它太大了，我项目中用不了那么多东西。
现在网络好了，感觉都无所谓了。
返回顶楼
          回帖地址
0 请登录后投票
  • lululu163
  • 等级: 初级会员
  • 性别:
  • 文章: 2
  • 积分: 60
  • 来自: 武汉
   发表时间：2011-05-04  
创建tr和td可以直接用 
table.insertRow(-1).insertCell(-1);
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics