- 浏览: 1214473 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (434)
- js (20)
- struts2 (77)
- spring (11)
- hibernate (17)
- ssh整合 (9)
- 程序例子 (4)
- 正则表达式 (8)
- JSP (20)
- IDE (15)
- 数据库 (10)
- 工作经验技巧感悟 (21)
- 程序员的幽默 (4)
- windows设置 (4)
- 名词解释 (4)
- 技术入门 (4)
- jFreeChart (16)
- OGNL (5)
- java基础 (46)
- dwr (4)
- portal (1)
- 示例用到的附件 (0)
- 优秀程序员45个习惯 (1)
- webService (1)
- shell (3)
- ibatis (3)
- 开发工具 (1)
- OS (3)
- xmlbean (2)
- design_pattern (0)
- error (1)
- testng (2)
- python (18)
- hadoop (21)
- mapreduce (9)
- Hive (0)
- HBase (0)
- ubuntu (22)
- 多线程 (7)
- 自我改进 (6)
- 设计模式 (1)
- ssh (2)
- ant (4)
- guake (2)
- 云计算 (9)
- hdfs (3)
- 大数据 (1)
- 电信业务 (1)
- maven (2)
- svn (5)
- UML (1)
- 待处理问题 (2)
- log4j (1)
- css (1)
- LevelDb (0)
- thrift (6)
- 辅助工具 (3)
- 算法 (1)
- tornado (0)
- twisted (1)
- jvm (0)
- 图书 (1)
- 其他 (1)
- oracle (2)
- mvn (1)
- 私人信息 (0)
- nio (1)
- zookeeper (1)
- JavaIO (3)
- mongodb (1)
- java-高级 (6)
- spring-深入 (1)
- tomcat (1)
- quartz (1)
- 面试题 (1)
- redis (3)
- EJBCA (0)
- spring-3.0 (1)
- memcache (3)
- 性能检测 (1)
- android (0)
- 开源项目 (1)
- 将博客搬至CSDN (0)
- 架构之路 (1)
最新评论
-
pjwqq:
“子类对象”都拥有了“父类对象的一个实例的引用”我晕,应该是“ ...
java继承--父类属性的存放位置 -
gwgyk:
关于楼主最后的问题,我想可能是这样:InputFormat默认 ...
eclipse 运行hadoop wordcount -
fanjf:
上述7点基本具备,可惜现在因为项目需要,做管理方面工作!
如何判断自己是否具有成为一名优秀程序员的潜质 -
摸爬滚打NO1:
链接已经失效
Eclipse添加JSEclipse 插件(js插件) -
younglibin:
看了以上7条, 自己 也不知道是否能够对上, 感觉没一点都有那 ...
如何判断自己是否具有成为一名优秀程序员的潜质
cloneNode() 方法可创建指定的节点的精确拷贝。
(可以做一个模版 然后做一个隐藏域,点击按钮就添加一个模板!)
此方法可返回所复制的节点。
该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点。
返回的节点不属于文档树,它的 parentNode 属性为 null。
当复制的是 Element 节点时,它的所有属性都将被复制。但要注意,当前节点上注册的事件监听器函数不会被复制。
cloneNode() - 克隆节点
示例一:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled1</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
//添加子接口
function add(){
var newSub = document.all.templete.cloneNode(true);
set(newSub , document.all.subs.childNodes.length);
document.all.subs.appendChild(newSub);
}
function set(divObj , index){
divObj.id = '';
divObj.style.display = "block";
var elements = divObj.getElementsByTagName("INPUT");
for(var i=0; i<elements.length; i++){
elements[i].name = elements[i].name.replace(/\[\d*\]/, '['+index+']');
}
}
function remove(delLink){
document.all.subs.removeChild(delLink.parentNode.parentNode);
var subDivs = document.all.subs.childNodes;
for(var i=0; i<subDivs.length; i++){
set(subDivs[i] , i);
}
}
</script>
</head>
<body>
<div align="center">
<input type="button" value="添加子接口" onClick="add()"/>
</div>
<div id="subs">
<%-- 子接口层 --%>
</div>
<%-- 子接口 HTML模板 开始 --%>
<div id="templete" style="display:none;">
<div>子接口信息
<a href="#" onclick="remove(this)" title="删除该子接口" style="font-size:12px;">删除</a>
</div>
<table>
<tr>
<td><input type="text" name="name"/></td>
</tr>
</table>
</div>
<%-- 子接口 HTML模板 结束 --%>
</body>
</html>
实例二:
<!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=gbk" />
<title>cloneNode()</title>
<script language="javascript">
i=1;
function add()
{
var tableObject=new Object();
var isneed=true;
tableObject=document.getElementById("show");
//判断是否有必要添加新的输入行
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"/>';
var newSelect=document.getElementById("sex").cloneNode(true);
newSelect.id="sex"+i;
td2.appendChild(newSelect);
td3.innerHTML='<input type="text" name="age" onchange="add()"/>';
}
}
</script>
</head>
<body>
<form>
<table id="show" 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="name"/></td>
<td>
<select name="sex" id="sex">
<option value="0" selected="selected">男</option>
<option value="1">女</option>
</select>
</td>
<td><input type="text" name="age""/></td>
</tr>
</table>
<tr>
<td colspan="4">
<input type="button" value="添加一人" onclick="add()"/>
</td>
</tr>
</form>
</body>
</html>
评论
这句话没有看懂,楼主能否解释下,或者给个事件监听器函数不能复制的例子
发表评论
-
点击table首行列名按该列内容排序+冻结窗口
2010-01-08 09:06 4406注意 : 这里的只适用于 表头的 (即:首行的)td 和显示 ... -
dwr和js来实现ajax技术
2009-12-17 16:58 2173在jsp页面 处于一个超链接: 如下图:对于处理状态 和 ... -
dom属性实例
2009-12-16 11:30 1671文档对象模型(DOM)是表示文档(比如HTML和XM ... -
js 格式化时间
2009-12-16 11:20 3911/** * 时间对象的格式化; */ D ... -
jsp页面 显示和隐藏提示信息
2009-12-04 16:01 5560function hide(){ var bloc ... -
javascript页面跳转常用代码
2009-11-30 08:56 19682009-11-16 19:20 按钮 ... -
用JS弹出窗口及参数解释
2009-11-30 08:54 1513用JS弹出窗口 ... -
javascript 控制优化页面 js 加载顺序
2009-11-30 08:49 3072学习js的时候,经常会遇到这样的问题,如何控制dom、js在页 ... -
js全选例子一个
2009-09-11 11:09 1636<html><head> < ... -
js中的窗体(window)
2009-09-11 10:39 1783showModalDialog() ... -
js隐藏域的显示与隐藏
2009-08-26 15:52 5069<html> <head> < ... -
js三级联动
2009-08-26 15:50 1673<html> <head> < ... -
JS函数一览100条
2009-08-26 13:15 12711.document.write(""); ... -
getElementById获得div <a> 之间的值
2009-08-24 15:53 2678get-Element-By-Id,就是通过ID来设置/返回 ... -
js中document在IE出错在Firefox正确
2009-08-24 15:51 1888Element_value = document . getE ... -
一个js登陆验证例子 经典
2009-08-24 15:16 4184<html> <head> < ... -
EL表达式
2009-08-24 09:24 1835EL表达式总是用大括号 ... -
js在jsp中的加载执行顺序
2009-08-22 11:13 4870页面上的Javascript代码是HTML文档的一部分,所以J ... -
XTREE jsp页面的tree 结构
2009-08-21 10:46 2582每个结点有一个状态叫做OPEN(打开); 如果结点为OPEN, ...
相关推荐
下面通过一个具体的例子来展示如何使用`cloneNode()`方法。 假设我们有如下HTML结构: ```html <span>1 <span>2 <span>3 ``` 我们可以使用以下JavaScript代码来克隆这个`div`及其子节点: ```javascript //...
在这个例子中,我们克隆了一个带有两个子节点的元素,并将克隆后的每个元素添加到页面中的一个父元素中。注意,我们使用了for循环来重复这个过程,以创建多个副本。当页面加载时,我们可以使用Chrome开发者工具查看...
在这个例子中,如果你在IE和Firefox中运行上述代码,会发现在点击第一个`div`时两个浏览器都会触发弹窗,但在点击第二个`div`时,Firefox不会触发弹窗而IE会。这是因为IE中`attachEvent`绑定的事件处理器在克隆节点...
在例子中,通过这两个属性可以获取到整个文档的宽度和高度,解决浏览器的兼容性问题。 4. **getElementById()**: 这个方法是根据元素的ID获取元素的常用方式。在上述removeNode()函数中,通过这个方法找到了id为...
- `getMedalsGroup()` 函数:虽然在这个例子中没有详细实现,但看起来这个函数用于获取当前选中的奖牌设置的值,可能是为了进一步的业务逻辑处理。 综上所述,这个JSP页面通过JavaScript实现了动态添加表格行的...
1.6 一个例子--JavaScript编写的计算器 1.7 学习和使用JavaScript的几点建议 1.8 关于本书的其余部分 第2章 浏览器中的JavaScript 2.1 嵌入网页的可执行内容 2.2 赏心悦目的特效 2.3 使用...
在这个例子中,我们设置了一个延时 3 秒后执行的函数,该函数会在控制台输出 "Hello after 3 seconds!"。 以上这些是 JavaScript 开发中常用的 DOM 操作方法和技术要点。掌握它们能够帮助开发者更高效地操作页面...
在给定的例子中,`20 >> 3`的结果是4(因为20的二进制表示是10100,右移三位后变成00010),然后`4 | 9`的结果是11,因为4的二进制是0100,9的二进制是1001,按位或后是1101,即十进制的13。 2. JavaScript异或运算...
在这个例子中,`Singleton`对象有一个内部函数`createInstance`用于创建实例,而`getInstance`方法检查`instance`是否存在,如果不存在,则调用`createInstance`并存储结果。这样每次调用`getInstance`时,无论调用...
在这个例子中,`#child`元素将从`#parent1`中移除,并被追加到`#parent2`中,结果是`#child`将不再出现在`#parent1`下面,而是出现在`#parent2`下面。原来的`#parent1`区域将会空出来,因为它的子元素`#child`已经被...
在这个例子中,由于提供的代码没有涉及具体的淡入淡出实现,所以这部分需要自行补充。 8. **兼容性和优化**: 考虑到不同浏览器的兼容性,确保使用的JavaScript语法能在大部分浏览器中运行。另外,优化性能,如...
在这个例子中,DOM操作包括创建新元素、修改元素属性、获取元素位置等。 3. **事件处理**: 实现拖拽功能需要对鼠标事件进行精确控制。涉及到的鼠标事件主要有: - mousedown:在用户按下鼠标按钮时触发。该事件...
并在GetBgColor获取背景色程序中使用: while (bgc == this._transparent && (node = node.parentNode) != document) { bgc = CurrentStyle(node).backgroundColor; } return bgc == this._transparent ? "#fff" :...
此方法接受两个参数:第一个是希望插入的新节点,第二个是参照节点。新节点将被插入到参照节点之前的位置,并且此方法也会返回新插入的节点。例如,将一个新创建的`li`元素添加到`ul`的第一个子节点前的代码如下: ...
在这个例子中,如果文档中存在`id`为`exampleId`的元素,则`element`变量将引用该元素;如果没有找到匹配的元素,则返回`null`。 --- ##### 2. `document.getElementsByTagName(tagName)` **功能**: 此方法返回...
在这个例子中,当用户点击“复制”按钮时,`copyrow`或`copyrowUpdate`会被调用,根据需要进行行的复制和更新;点击“删除”按钮则调用`deleteRow`删除行。此外,还有一个“添加行”按钮,它调用`addRow`函数(在...