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

最新推荐文章于 2023-05-06 09:33:40 发布
最新推荐文章于 2023-05-06 09:33:40 发布
阅读量208 收藏
点赞数
文章标签： Blog XHTML Web J# HTML
在web页面中经常需要出现许多完全一样的控件项，而需要控件的多少完全由用户输入量决定，在js中可以很容易的实现这点，效果展示大多时候比语言来得更有魅力。

[code]<!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>[/code]
hejianhuacn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js中cloneNode
java20100406的专栏
08-20 2135
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+pat
Js ——CloneNode()用法
热门推荐
进击的葱
12-26 2万+
描述： cloneNode() 方法可创建指定的节点的精确拷贝。 cloneNode() 方法 拷贝所有属性和值。 该方法将复制并返回调用它的节点的副本。 如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。 否则（也就是默认值，或者false），它只复制当前节点。 案例： 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt...
06-JS使用过的函数 51-60
q506174602的博客
05-06 105
06-JS使用过的函数 51-60
[js] cloneNode
qq_14993591的博客
09-07 151
<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 1117
为什么80%的码农都做不了架构师？>>> ...
js中cloneNode()的使用 两个例子
yangguoklose的专栏
11-09 341
cloneNode() 方法可创建指定的节点的精确拷贝。 （可以做一个模版 然后做一个隐藏域，点击按钮就添加一个模板！） 此方法可返回所复制的节点。 该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。 返回的节点不属于文档树，它的 parentNode 属性为 null。 当复制的是 ...
javascript cloneNode()方法的使用
10-29
控件cloneNode（）方法的使用 实例代码。
javascript 拷贝节点cloneNode()使用介绍
01-19
cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没有父节点.除非使用appendChild,...
javascript dom操作之cloneNode文本节点克隆使用技巧
10-29
本克隆函数cloneNode他有两个参数——true or false
javascript当中cloneNode的用法
qq_43650923的博客
10-30 595
例 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中cloneNode()的使用
hejianhuacn的专栏
04-24 3172
在web页面中经常需要出现许多完全一样的控件项，而需要控件的多少完全由用户输入量决定，在js中可以很容易的实现这点，效果展示大多时候比语言来得更有魅力。 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
JS中关于cloneNode方法
iteye_20446的博客
10-25 503
这几天做了个比较大的课题，到此为止，现在算是完成了，大概也忙活了一个礼拜的时间，基本上就是看着身边同事都在玩，我一个人忙的不可开交，偶尔加加班，也完成了！前前后后也查了不少资料！正因为大家都不会，他们就叫我来处理这个！没办法，只能挑起大梁，好了，废话不多说，进入今天的正题： 在新做的这个课题上很大部分都是js写的多！于是乎在做到这个动态添加table的一行，使用了[code="js"]clone...
gridView固定表头问题
weixin_30500105的博客
10-14 118
在网上看过不少gridView固定表头的做法，实验了一下表头是固定住了，但是表头列没有竖线分割了，仔细看了一下代码，把每列表头都套用这个CSS就可以了注：蓝色部分及红色部分是关键点。前台代码：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="BudgetAudit_Defau...
js中cloneNode()和removeChild()实现添加和删除文件上传域
天道酬勤
08-10 3427
我想实现的效果是：在多个上传文件时，单击添加何以增加一个文件上传域，单击删除可以删除一个文件上传域。用js实现的代码：                           function insertRow(){                         var rowindex = document.all("addordel").length;
js dom 方法 js中cloneNode()的使用（复制元素）
龙卷风之家
01-08 7351
js dom 方法 js中cloneNode()的使用（复制元素）   document方法：   getElementById(id)  Node  返回指定结点的引用   getElementsByTagName(name)  NodeList  返回文档中所有匹配的元素的集合   createElement(name)  Node  Node   creat
JS第二部分
c283933的博客
05-27 355
一、DOM DOM：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可拓展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。 文档：一个页面就是一个文档，在DOM中用document表示 元素：页面中的所有标签都是元素，在DOM中用element表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 1.操作元素 1）改变元素内容 语法： element.innerText
使用cloneNode时需要注意的问题
番茄拌糖的专栏
08-26 1万+
cloneNode()是DOM中Node对象的方法，使用cloneNode可以方便的复制DOM节点。cloneNode()接收一个参数include_all。include_all为一个布尔值，true表示被clone的节点的所有子节点也会被clone（既深度clone），false(默认)只会clone原节点。 1.当被clone的节点包含script标签时，clone后script标签是
js克隆cloneNode
最新发布
05-20
在JavaScript中，可以使用`cloneNode`方法来克隆一个节点。该方法是在`Node`对象上定义的，可以用于任何继承自`Node`的元素（例如，`Element`、`Text`、`Comment`等）。 `cloneNode`方法有一个可选参数`deep`，它指定是否克隆该节点的所有后代节点。如果`deep`为`true`，则会克隆整个子树；如果`deep`为`false`，则只克隆该节点本身。 下面是一个使用`cloneNode`方法克隆节点的例子： ```javascript // 获取要克隆的节点 var originalNode = document.getElementById("original"); // 克隆节点 var clonedNode = originalNode.cloneNode(true); // 将克隆的节点添加到文档中 document.body.appendChild(clonedNode); ``` 在这个例子中，我们首先获取了一个要克隆的节点（id为"original"），然后使用`cloneNode`方法克隆它，指定`deep`参数为`true`，表示克隆整个子树。最后，将克隆的节点添加到文档中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值