js中cloneNode()的使用

最新推荐文章于 2024-05-28 11:44:38 发布
最新推荐文章于 2024-05-28 11:44:38 发布
阅读量597 收藏
点赞数
分类专栏： Javascript 文章标签： input xhtml javascript html border function
     在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" οnchange="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" οnchange="AddRow()"/></td>
  </tr>
 </table>
</form>
</body>
</html>
qingchouchen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中cloneNode
java20100406的专栏
08-20 2135
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+pat
js中cloneNode()和removeChild()实现添加和删除文件上传域
天道酬勤
08-10 3427
我想实现的效果是：在多个上传文件时，单击添加何以增加一个文件上传域，单击删除可以删除一个文件上传域。用js实现的代码：                           function insertRow(){                         var rowindex = document.all("addordel").length;
javascript 拷贝节点cloneNode()使用介绍
01-19
cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没有父节点.除非使用appendChild,insertChild(),replaceChild()将它添加到文档 代码如下: <div id=”guoDiv”> <span>1</span> <span>2</span> <span>3</span> </div> var oDiv = document.getElementById(“guoDiv”); var deepList = oDiv.
js中cloneNode()的使用 （Blog合并）
hejianhuacn的专栏
12-04 208
在web页面中经常需要出现许多完全一样的控件项，而需要控件的多少完全由用户输入量决定，在js中可以很容易的实现这点，效果展示大多时候比语言来得更有魅力。 [code] 控件cloneNode（）方法的使用 i=1; function AddRow() { var tableObject=new Object(); var isneed=...
Js ——CloneNode()用法
热门推荐
进击的葱
12-26 2万+
描述： cloneNode() 方法可创建指定的节点的精确拷贝。 cloneNode() 方法 拷贝所有属性和值。 该方法将复制并返回调用它的节点的副本。 如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。 否则（也就是默认值，或者false），它只复制当前节点。 案例： 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt...
javascript cloneNode()方法的使用
10-29
控件cloneNode（）方法的使用 实例代码。
javascript dom操作之cloneNode文本节点克隆使用技巧
10-29
本克隆函数cloneNode他有两个参数——true or false
JS中关于cloneNode方法
iteye_20446的博客
10-25 503
这几天做了个比较大的课题，到此为止，现在算是完成了，大概也忙活了一个礼拜的时间，基本上就是看着身边同事都在玩，我一个人忙的不可开交，偶尔加加班，也完成了！前前后后也查了不少资料！正因为大家都不会，他们就叫我来处理这个！没办法，只能挑起大梁，好了，废话不多说，进入今天的正题： 在新做的这个课题上很大部分都是js写的多！于是乎在做到这个动态添加table的一行，使用了[code="js"]clone...
js中cloneNode()的使用 两个例子
08-20 255
javascript cloneNode()方法
like sunny,like rain
10-21 846
该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。  返回的节点不属于文档树，它的 parentNode 属性为 null。  当复制的是 Element 节点时，它的所有属性都将被复制。但要注意，当前节点上注册的事件监听器函数不会被复制。
[js] cloneNode
qq_14993591的博客
09-07 152
<h1> <div class="div1" id="div2" name="div3"> 我是div标签 <p>我是p标签</p> <span>我是span标签</span> </div> </h1> <h2> </h2> var oDiv =...
JavaScript 用 cloneNode 方法克隆节点
weixin_33939380的博客
10-02 1119
为什么80%的码农都做不了架构师？>>> ...
javascript当中cloneNode的用法
qq_43650923的博客
10-30 596
例 1.1（cloneNode()IEFF.html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- window.onload=function(){ var pa...
js--对象的浅层复制与深度克隆
宅即万物
12-06 452
深度克隆 当对象中有引用类型的数值时，并且要求不可以改变原对象。此时需要深度克隆； 深度克隆有两种方式：递归和JSON.parse 递归 function deepClone(obj){ 　　let objClone = Array.isArray(obj) ? [] : {}; 　　if (obj && typeof obj === 'object') { 　　　　for(let key in obj){ 　　　　　　if (obj[key] && typeof obj[
常见的 HTML 标准
csdn_ad986ad的博客
04-30 895
HTML（Hypertext Markup Language）有多个版本和标准。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 1085
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
js中的cloneNode有什么作业
05-05
JavaScript中的`cloneNode()`方法是用于复制一个节点的副本并返回该副本的方法。它的作用主要有以下几个方面： 1. 在DOM中复制一个节点及其所有的子节点，而不改变原始节点的结构和属性。 2. 克隆的节点可以在文档...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值