`
jianson_wu
  • 浏览: 62808 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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>

 

分享到:
评论
7 楼 lululu163 2011-05-04  
创建tr和td可以直接用
table.insertRow(-1).insertCell(-1);
6 楼 faiinlove 2011-04-13  
jquery就是封装了很多底层dom操作,还有做了夸浏览器兼容处理。
最开始,很抵触jquery,感觉它太大了,我项目中用不了那么多东西。
现在网络好了,感觉都无所谓了。
5 楼 jianson_wu 2011-04-13  
现在jqury很受欢迎,但是看起来都是基于DOM基础上的。。。。。接下来就得看看jquery了,以前接触过后来扔在一旁了。。。。。 多谢各位的意见,很给力
4 楼 faiinlove 2011-04-13  
08年刚毕业,不知道有jquery那会,把犀牛书翻了好几遍,写了一整套这种操作dom文档的东东。
3 楼 dldahua 2011-04-13  
恩~~不错,在一些不让用Jquery等框架的变态项目中很有用。
多多学习!
2 楼 jianson_wu 2011-04-07  
差不多那个意思,只是DOM 的几个简单应用,拿出来贴一下,不知道各位在实际应用中是否会用到这些,提些意见
1 楼 xyztony1985 2011-04-07  
啥东西也不说清楚,莫不是要每人都去运行代码?

相关推荐

    jsdom-task-lister-lite-nyc01-seng-ft-071320

    TaskLister Lite :trade_mark: 今天,您将创建一个专注于DOM操作的简单列表应用程序。 看一下index.html并确定在编写任何代码之前需要处理的DOM元素。 查看!学习目标: 使用event.preventDefault默认操作指示: 该...

    vuedevtools安装.rar

    Vue.js devtools,是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。做前端开发的IT工程师应该比较熟悉这款工具,可以边侧边栏窗格中的页面,边检查代码。由于...

    一份关于Vue的面试题

    key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列...

    group1_project2

    )一个小小的CRUD应用 战队:SKOTU(宇宙超级科德) 成员: EXPRESS又名The Refactorer,别名Ashley SQL又名Sir Schema,别名John ELEMENT又名DOM女士,别名Ikra 项目图 ERD HTML页面 index.html-网站首页。 ...

    React-Piano:用React创建一个钢琴应用程序!

    Janki是Janko启发的音乐应用程序,它使用Rails,React和Flux架构构建。 看看上面的现场演示! 即使它位于Rails MVC框架上,其构造也遵循Flux流程。 由于React的组件和虚拟DOM的性能,创建视图和前端逻辑很快就可以...

    que.js:微型,简单且有用的MVVM框架(在ES6中)

    我想要的,就是引入一个小小的 JS 文件就能直接开搞,不要 watch 不要 compute 不要 component,越接近原生越好,能快速渲染页面即可。语法上要求所有指令直接绑定在 DOM元 素上,而不是另起一行写循环或判断;...

    Jquery全景知识体系脑图

    Jquery全景知识体系脑图,内容非常丰富详细,包含以下几大部分: 1,认识JQuery;...3,JQuery中的DOM操作; 4,JQuery中的事件与动画; 5,JQuery性能优化和技巧; 6,编写JQuery插件; 7,JQuery与Ajax应用;

    use-last-fm::guitar:React Hook使用实时last.fm数据并在您的应用程序中显示您当前播放的歌曲

    :package: 小小: use-last-fm压缩和压缩后不到700个字节。 :deciduous_tree: 通用:我们分配esm和cjs模块。 :man::laptop: 对开发人员友好:在生产中剥离的有用的开发消息 :keyboard: 强类型化: use-last-fm用...

    CSSLoader:RequireJS 插件,用于可靠地加载和等待 css 文件

    当浏览器不提供本机“加载”事件时,可靠地了解样式表是否应用于 DOM。 插件逻辑还包含的解决方法。 因为在不同的浏览器中有很多警告,所以插件中使用的每种方法都经过了彻底的测试。 可以在单元测试。 入门 下载...

    big-gulp:固执己见的前端开发环境

    用您的代码替换/src文件夹中的样板代码(或使用示例代码-需要react&react-dom模块) gulp 您的文件将被编译并保存到/dist文件夹,并且浏览器同步会话将开始显示您的实时应用程序。 您对代码进行的任何更改都会...

    纸和墨:一个很棒的Material Dashboard,它是基于Material UI的组件使用ReactJs制作的!

    纸和墨水ReactJs,Material-UI ...产品特点CSS-in-JS样式后台创建应用程序Material-UI v4 React v16 React钩React上下文React Router Dom v5入门克隆存储库$ git clone https://github.com/georgesimos/paper-and-ink.

    remmi:macOS状态栏中的每日GitHub贡献

    一种开始在Swift中编写macOS应用程序的有趣方式。 不严重。 备注 计数每5分钟刷新一次。 单击计数将触发刷新并重置刷新计时器。 用于DOM解析的SwiftSoup。 是的,这是不必要的开销。 安装 在GitHub的部分中下载...

    ngCrop:AngularJS模块,用于在HTML5画布上进行简单的图像裁剪

    ngCrop 用于图像裁剪的AngularJS模块 概述 ... 该指令通过在DOM上插入HTML5画布并绘制图像文件来进行操作绑定到指令的隔离范围。 在图像上绘制一个选择器正方形,以供用户在图像上指定所需... 在主应用程序js文件中将ngc

    carousel:patreon的轮播演示

    所有DOM操作均由React.js处理。 尽管React在处理动画方面声誉不佳,但是可以通过“过渡”样式属性和正确设置动态子项来获得合理的吸引力效果。 所有样式都是即时计算并内联应用的。 与具有全局类名的静态外部样式...

Global site tag (gtag.js) - Google Analytics