js操作之cloneNode、insertRow、insertCell例子

最新推荐文章于 2022-04-07 15:26:21 发布

ocean1010

最新推荐文章于 2022-04-07 15:26:21 发布

阅读量3.5k

点赞数

分类专栏： html/js 文章标签： button input function border textbox xhtml

本文链接：https://blog.csdn.net/ocean1010/article/details/6592555

版权

html/js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文本克隆函数cloneNode他有两个参数——true or false

true：完全的复制一个节点，什么叫完全呢，就是复制一切，包括他的子节点，以至于文本节点，凡是有的，一律克隆，所谓完全

false：只克隆当前节点，不克隆任何的子节点，当然也不会克隆他所包裹的文本，因为任何文本都有指向他的节点（文本节点）

当然有时候两者是可以通用的哦，如果要复制的节点没有任何的子节点，这是二者全等；
例子代码：

<!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();
	var td4=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"/>';  
	td4.innerHTML='<input type="button" value="新增" οnclick="AddRow()" title="全部填写完成后，请单击这里"/>';   
   }
 }
</script>
</head>
<body>
<form>
 <table id="CloneNodeShow" border="2" bordercolor="#000000">
  <tr><th>序号</th><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" οnchange="AddRow()">
     <option value="%">请选择性别</option>
     <option value="0">男</option>
     <option value="1">女</option>
    </select>
   </td>
   <td><input type="text" name="age" οnchange="AddRow()"/></td>
   <td><input type="button" value="新增" οnclick="AddRow()" title="全部填写完成后，请单击这里"/></td>
  </tr>
 </table>

<hr>
 <div> 
<span>Shadow</span>

<input type="button" value="效果1" οnclick="fn1()" title="cloneNode()参数true和false的区别"/>
<input type="button" value="效果2" οnclick="fn2()" title="cloneNode()参数true和false的区别"/>

</div> 
<script language="javascript">
var element = document.getElementsByTagName('span')[0]; 

function fn1()
{
	var t1 = element.cloneNode(false).innerHTML;//不复制子节点 
	var t2 = element.cloneNode(true).innerHTML;//copy all 
	alert(t1); 
	alert(t2); 
}
function fn2()
{
	var textnode = element.firstChild;//指向文本节点 
	var t1 = textnode.cloneNode(false).nodeValue; 
	var t2 = textnode.cloneNode(true).nodeValue; 
	alert(t1); 
	alert(t2); 
}
</script>

</form>
</body>
</html>

例子二来源于网上

<html> 
<head> 
        <script   type="text/javascript"> 
                var   idCounter   =   1; 
                function   fnClone() 
                { 
                        var   oRow   =   document.getElementById("row1").cloneNode(true); 
                        
                        document.getElementById("oTable").childNodes[0].appendChild(oRow); 
                        
                        oRow.id   =   "row"   +   (++idCounter); 
                } 
function   fnget(){ 
    var   bb=document.getElementsByName("texta") 
    for(var   i=0;i <bb.length;i++){ 
        alert(bb[i].value) 
    } 
} 
        </script> 
</head> 
<body> 
        <table   border="1"   id="oTable"> 
                <tr   id="row1"> 
                        <td> Text </td> 
                        <td> <input   type="text"   value="textbox"   name="texta"/> </td> 
                        <td> <input   type="button"   value="click   me   get   text   value"   οnclick="alert(this.parentNode.parentNode.childNodes[1].childNodes[0].value)"/> </td> 
                </tr> 
        </table> 
        <input   type="button"   value="Clone"   οnclick="fnClone()"   /> </br> 
<input   type="button"   value="get   text   Value"   οnclick="fnget()"   /> 
</body> 
</html>