js中cloneNode()的使用
在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 拷贝节点cloneNode()使用介绍.docx
cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没有父节点.除非使用appendChild,...
控件cloneNode()方法的使用 实例代码。
以下是cloneNode 方法原型: newElement oldElement.cloneNode(bool deep); 这个方法只有一个参数deep,布尔值,如果为true,则克隆oldElement 这个及其子节点,否则只可能这个节点本身。 返回值就是一个克隆的节点...
本克隆函数cloneNode他有两个参数——true or false
使用JavaScript的PointerEvent,Node.cloneNode()和getBoundingClientRect()进行拖放的界面的小型演示,您可以在其中选择操作框并将其放置在放置区中。 您可以在放置区中移动它们,以正确的顺序设置数字时,会...
12.5.4 克隆节点--一个使用cloneNode()复制表格的例子 12.5.5 移动节点及其范例 12.5.6 关于添加新行和排序的小技巧 12.6 读写数据--添加、修改和删除属性 12.7 外观与行为 12.7.1 DOM样式...
在js中字符截取函数有常用的三个slice()、substring()、substr()了,下面我来给大家介绍slice()、substring()、substr()函数在字符截取时的一些用法与区别吧。
JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...
查询窗口 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有: document.getElementById(); objNode[removed]; objNode.cloneNode(); objNode.removeAtrribute(); ...
并在GetBgColor获取背景色程序中使用: while (bgc == this._transparent && (node = node.parentNode) != document) { bgc = CurrentStyle(node).backgroundColor; } return bgc == this._transparent ? "#fff" :...
在调用init方法之前add的条目,会立即显示,而在init后添加的或使用中动态添加的,都会以动态效果 添加到菜单。 菜单的动作基本分为open(伸出),close (缩回),extend (变长),shorten(变短); 四种操作可...
clonenode server.js例子 执照麻省理工学院执照版权所有(c)2021 DevTeamForRedisHackt 特此免费授予获得此软件和相关文档文件(“软件”)副本的任何人无限制地处理软件的权利,包括但不限于使用,复制,修改,...
1、querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素 2、//Math 数学常数和函数的属性和方法 适用于 Number 类型。 3、//Math.round 函数返回一个数字四舍五入后最接近的整数。 4、//Math.random...
代码如下:var customerInfoMethod ={ //复制增加行 copyrow:function(obj,id)... var newRow=resrow.cloneNode(true);//document.createElement(“tr”); var parent = resrow[removed]; if(parent.lastChild == r