`
hejianhuacn
  • 浏览: 70229 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

js中cloneNode()的使用 (Blog合并)

阅读更多
在web页面中经常需要出现许多完全一样的控件项,而需要控件的多少完全由用户输入量决定,在js中可以很容易的实现这点,效果展示大多时候比语言来得更有魅力。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>控件cloneNode()方法的使用</title>
<script language="javascript">
 i=1;
 function AddRow()
 {
   var tableObject=new Object();
   
   var isneed=true;
   
   tableObject=document.getElementById("CloneNodeShow");
   //判断是否有必要添加新的输入行
   for(var j=0;j<tableObject.all.tags("input").length;j++)
   {
    var inputs = tableObject.all.tags("input")[j]; 
    if(inputs.type=="text" && inputs.value=="")
    {
     isneed=false;
    }
   }
   if(isneed)
   {
    //添加一行   
    var newTR=tableObject.insertRow();
    var td0=newTR.insertCell();
    var td1=newTR.insertCell();
    var td2=newTR.insertCell();
    var td3=newTR.insertCell();
    
    td0.innerHTML=(++i)+'.';
    td1.innerHTML='<input type="text" name="username"/>';
    //true表示深度克隆
    var newSelect=document.getElementById("sexType").cloneNode(true);
    newSelect.id="sexType"+i;
    td2.appendChild(newSelect);
    td3.innerHTML='<input type="text" name="age" onchange="AddRow()"/>';   
   }
 }
</script>
</head>
<body>
<form>
 <table id="CloneNodeShow" border="2" bordercolor="#000000">
  <tr><th></th><th>姓名</th><th>性别</th><th>年龄</th></tr>
  <tr id="signTR"  >
   <td>1.</td>
   <td><input type="text" name="username"/></td>
   <td>
    <select name="sexType" id="sexType">
     <option value="%">请选择性别</option>
     <option value="0">男</option>
     <option value="1">女</option>
    </select>
   </td>
   <td><input type="text" name="age" onchange="AddRow()"/></td>
  </tr>
 </table>
</form>
</body>
</html>
分享到:
评论

相关推荐

    JavaScript执行效率优化与内存管理优化.pdf

    在JavaScript中,使用数组进行字符串拼接比直接使用加号(`+`)拼接更有效率,尤其是在处理大量字符串合并时。IE在处理字符串拼接时会创建临时的String对象,导致性能下降。Firefox和Opera对此进行了优化,但使用数组...

    web前端优化知识总结+笔试+面试总结.pdf

    DOM 操作优化的方法包括使用 DocumentFragment、使用 innerHTML、使用 cloneNode 等。 2. CSS 选择符优化 CSS 选择符优化可以提高页面的加载速度和响应速度。选择符优化的方法包括使用 ID 选择符、使用 Class 选择...

    JavaScript执行效率优化及内存管理优化.docx

    JavaScript执行效率优化与内存管理是Web开发中的关键环节,它们直接影响到网页的性能和用户体验。下面将详细讨论这些优化策略。 1.1 DOM操作优化 1.1.1 使用DocumentFragment批量处理DOM 在大量添加DOM元素时,...

    JS提高优化性能完全秘籍.pdf

    在JavaScript中,对于大量字符串的拼接操作,直接使用`+`运算符会导致性能问题。这是因为每次拼接都会创建一个新的字符串对象,特别是在IE中,随着字符串长度的增长,性能会急剧下降。而其他浏览器如Firefox和Opera...

    JS_操作节点.doc

    在"JS_操作节点.doc"中提到的是一些关键的节点属性和方法,它们构成了DOM操作的基础。 1. **Attributes**:这是一个只读属性,它存储了节点的所有属性,如HTML元素的`id`、`class`等。可以通过`element.attributes`...

    WindowManager_BadTokenExceptionTest.rar_The Method Method

    `WindowManager_BadTokenExceptionTest`可能是一个测试用例,用于检查在Windows管理器中处理特定异常时的行为,而`BestMatchSpecFactory`和`source.js`可能是相关的类或脚本,它们可能与DOM操作或者UI事件处理有关。...

    js解析XML常用对象、属性、方法

    ### JavaScript 解析 XML 常用对象、属性与方法详解 在 Web 开发中,XML(可...这些知识对于理解如何使用 JavaScript 处理 XML 数据至关重要。通过熟练掌握这些概念,开发者可以更高效地构建出响应式的 Web 应用程序。

    javascript 常用DomAPI总结

    本文将对原生 JavaScript 中常用的 DOM 节点相关 API 进行详细总结。 #### 二、节点属性与方法 ##### 1. Node 节点属性 - **Node.nodeName**: 返回节点名称,只读。 - **Node.nodeType**: 返回节点类型的常数值,...

    XMLDOM对象方法中文手册chm

    - 在JavaScript中,可以使用`ActiveXObject`(IE)或`XMLHttpRequest`(其他浏览器)加载XML文件,然后使用DOM方法进行操作。 - `document.implementation.createDocument`方法可用于创建一个新的XML文档实例。 8...

    关于javascript document.createDocumentFragment()

    `document.createDocumentFragment()`是JavaScript中的一个非常有用的API,它允许开发者在不实际修改DOM树的情况下构建和操作一组节点。这个方法返回一个无父节点的`DocumentFragment`对象,可以被视为一个临时的、...

    javascript-cheat-sheet-v1

    这份速查表涵盖了JavaScript中常见的对象、属性、方法等核心概念,并通过示例帮助读者更好地理解和应用这些知识点。 #### JavaScript 常用对象与方法 **1. Object** - **toString()**: 返回一个表示该对象的字符...

    zoomy:这是一个缩放克隆。 我们叫zoomy:movie_camera:

    clonenode server.js例子 执照麻省理工学院执照版权所有(c)2021 DevTeamForRedisHackt 特此免费授予获得此软件和相关文档文件(“软件”)副本的任何人无限制地处理软件的权利,包括但不限于使用,复制,修改,...

    JavaScript Table行定位效果

    并在GetBgColor获取背景色程序中使用: while (bgc == this._transparent && (node = node.parentNode) != document) { bgc = CurrentStyle(node).backgroundColor; } return bgc == this._transparent ? "#fff" :...

    XMLDOM对象方法手册

    XMLDOM(XML Document Object Model)是微软开发的一种用于处理XML文档的接口,它允许程序员通过JavaScript或其他脚本语言在浏览器环境中解析、操作和创建XML数据。XMLDOM对象方法手册是学习和掌握XMLDOM的重要参考...

    个人总结前端基础面试题

    - **JS与图片管理**:使用版本控制工具如Git进行版本管理和协作开发,利用构建工具如Webpack进行资源打包和优化。 - **960Grid系统**:一种基于网格的设计框架,帮助开发者快速构建响应式布局。 - **LessCSS**:一种...

    前端笔试面试题目总结.docx编程资料

    - **触发方式**:在脚本文件或 `&lt;script&gt;` 标签中使用 `use strict` 指令触发严格模式。 - **意义**:严格模式有助于捕捉代码错误,防止某些意外的行为,使代码更加健壮。 #### 英文术语理解 - **HTML**:...

    font-interview3前端面试题整理.pdf

    前端面试题整理涵盖了众多核心知识点,包括DOM操作、事件处理、Ajax、网页渲染模式、JSON、性能优化以及JavaScript高级特性。下面将详细阐述这些关键点。 1. **DOM结构与操作**: - 节点间的关系:父子关系、兄弟...

    JavaScript高级程序设计 DOM学习笔记

    根据给定的文件信息,以下是关于JavaScript中DOM(文档对象模型)的相关知识点详解: DOM是文档对象模型(Document Object Model)的缩写,它是一个跨平台的接口,由W3C组织制定标准,用于在HTML或XML文档中创建和...

    JavaScript操作XML/HTML比较常用的对象属性集锦

    5. normalize():合并节点中的文本节点并清除空文本节点。 6. removeChild():移除指定节点。 7. replaceChild():用新节点替换一个已存在的子节点。 8. selectNodes():使用XPath表达式查询选择节点集(IE独有)。 ...

Global site tag (gtag.js) - Google Analytics