在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()使用介绍 在JavaScript中，`cloneNode()`方法是DOM（Document Object Model）操作中的一个重要功能，主要用于复制（克隆）DOM树中的节点及其属性。这对于创建复杂的用户界面或者...
javascript cloneNode()方法的使用 javascript 中的 cloneNode() 方法是用来克隆一个元素的，包括其所有子元素和属性。该方法返回克隆的元素，并且可以选择是否克隆元素的所有子元素。 在上面的实例代码中，我们...
然后，在JavaScript文件（例如test.js）中，我们可以在页面加载完成后使用cloneNode方法克隆这个节点： ```javascript window.onload = function() { var sourceNode = document.getElementById("div-0"); // 获取...
这种方法通过在IE中使用`onclick`属性来绑定事件处理器，避免了`cloneNode`带来的bug。原理是`onclick`绑定的事件处理器不会被`cloneNode`所复制。 下面是一个关于`attachEvent`和`addEventListener`在使用`...
cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没有父节点.除非使用appendChild,...
然而，当在Internet Explorer（尤其是版本8及以下）中使用`cloneNode`时，需要注意一些特定的行为，这些行为可能导致意料之外的结果，尤其是在涉及`script`标签时。 `cloneNode`方法接收一个布尔值参数`include_all...
"JS 中使用 DOM 复制（克隆）指定节点名数据到新的 XML 文件中的代码" 在本文中，我们将讨论如何使用 JavaScript 中的 DOM 来复制（克隆）指定节点名数据到新的 XML 文件中。这个过程涉及到三个重要的类：DOM...
可以使用 createElement()、createTextNode() 和 cloneNode() 等方法来创建节点，并使用 appendChild()、insertBefore() 等方法将节点添加到文档中。需要注意的是，创建的节点不会自动添加到文档中，需要手动将其...
在JavaScript中，我们可以使用`addEventListener`方法来绑定一个事件处理函数。例如，对于一个图片元素`<img id="thumbnail">`，我们可以在其上添加点击事件： ```javascript document.getElementById('thumbnail')...
总结起来，JS中的DOM操作是Web开发中的基础技能，它使得JavaScript能够动态地更新页面内容，响应用户的交互，以及实现各种复杂的前端功能。理解并熟练运用DOM API是成为合格的前端开发者所必需的。通过不断实践和...
- **JSP**：类似ASP，JSP也可以在HTML模板中插入JavaScript，或者使用Java的`<script>`标签执行JS代码。 - **PHP**：PHP同样支持在HTML中嵌入JavaScript，或者使用PHP生成动态的JavaScript代码。 - **HTML**：...
在JavaScript（JS）中，对表格（HTML Table）进行行列操作是常见的需求，尤其是在动态数据展示和用户交互的场景中。本项目“经典JS操作添加行列(我做的)”聚焦于如何利用JavaScript高效地向HTML表格中添加行和列。...
`cloneNode(deep)`方法的使用如下： ```javascript let originalNode = document.getElementById('myNode'); let clonedNode = originalNode.cloneNode(deep); ``` 这里，`deep`参数决定了是进行深复制还是浅复制。 ...
本文将介绍如何使用 JavaScript 操作 DOM 建立、增加、删除、克隆和访问节点。 1. 创建节点 使用 `createElement()` 方法可以创建一个新的元素节点。例如，`var node = document.createElement("div");` 创建了一...
在JavaScript中，我们可以使用`cloneNode()`方法来实现克隆操作。这个方法接受一个布尔参数，若为`true`则执行深克隆，`false`则执行浅克隆。例如： ```javascript let originalElement = document.getElementById...
JavaScript 中常用的 Web API 在 JavaScript 中，Web API 是指一些预先定义的函数，用于提供应用程序与开发人员基于某软件或硬件以访问一组例程的能力。这些 API 通常是通过直接调用来实现的。 通过 ID 获取元素 ...