javascript DOM 添加元素结点

ChangeZ_ 2011-08-31 06:07:25

原来的内容大概是这样的：
<TABLE>
<TR>
<TD>其他内容</TD>
<TD>其他内容</TD>
</TR>
<TR>
<TD>select</TD>
<TD>
<select name="trainingCourseClassTutor[0].tutorId" id="tutorId0">
<option value="-1">--請選擇--</option>
<option value="1">王大力1</option>
<option value="2">王大力2</option>
<option value="3">王大力3</option>
</select>
<img src="/html/icons/ico_add.gif" width="16" height="16" border="0" />
</TD>
</TR>
</TABLE>
然后我就想通过点击img来在它下面增加
<TR>
<TD> </TD>
<TD>
<select name="trainingCourseClassTutor[1].tutorId" id="tutorId1">
<option value="-1">--請選擇--</option>
<option value="1">王大力1</option>
<option value="2">王大力2</option>
<option value="3">王大力3</option>
</select>
</TD>
</TR>
这样的内容。具体应该怎么实现呢?我对DOM不熟悉。

...全文

114 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

ChangeZ_ 2011-08-31

打赏
举报

我把自己做的内容写在下面，以供有需要的人用：



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 </HEAD>

 <BODY>

<TABLE>

<TR>

	<TD></TD>

	<TD></TD>

</TR>

</TABLE>



<TABLE>

<TR>

	<TD>其他内容</TD>

	<TD>其他内容</TD>

</TR>

<TR id="addtr0">

	<TD>select</TD>

	<TD id="test">

	<select name="trainingCourseClassTutor[0].tutorId" id="tutorId0">

    <option value="-1">--請選擇--</option>

    <option value="1">王大力1</option>

    <option value="2">王大力2</option>

    <option value="3">王大力3</option>

    </select>

	<img src="ico_add.gif" alt="" onclick="javascript:addSelect();" />

</TD>

</TR>





</TABLE>

<SCRIPT type="text/javascript">

	

	/*

var t1 = /[0-9]{2}:[0-9]{2}/;//宽松一点的验证

var t2 = /([01][0-9]|2[0-3]):([0-5][0-9])/;//严格一点的验证

var temp1="18:16";//正确的时间格式 18点16分

var temp2="23:16";//错误的时间格式 25点16分



alert(t1.test(temp1));//true

alert(t2.test(temp2));//true

*/

//var options=document.getElementsByTagName("option");

/** 

 * 把 newChild 放到 targetChild 节点的后边 

 * @param {Object} newChild 

 * @param {Object} targetChild 

 */  

function insertAfter(newChild, targetChild){  

    //1. 获取 targetChild 的父节点  

    var parentNode = targetChild.parentNode;  

      

    //2. 判断 targetChild 节点是否为其父节点的最后一个子节点  

    if(parentNode){  

        //3. 若是最后一个子节点: 则直接把 newChild 加为 targetChild 父节点的子节点即可  

        if(parentNode.lastChild == targetChild){  

            parentNode.appendChild(newChild);  

        }  

        //4. 若不是最后一个子节点: 则先获取 targetChild 节点的下一个兄弟节点, 然后调用 insertBefore() 方法  

        else{  

            parentNode.insertBefore(newChild, targetChild.nextSibling);                       

        }  

    }  

}

var count=1;

function addSelect(){

	var first = document.getElementById("tutorId0");

	var select = document.createElement("select");

	

	for(var i=0;i<first.options.length;i++){

		var tmpOption=document.createElement("option");

		tmpOption.value=first.options[i].value;

		tmpOption.innerText=first.options[i].innerText;

		select.appendChild(tmpOption);

	}

	select.name="trainingCourseClassTutor["+count+"].tutorId";

    select.id="tutorId"+count;

	

	var td1= document.createElement("td");

	var blank=document.createTextNode(" ");

	td1.appendChild(blank);

	var td2=document.createElement("td");

	td2.appendChild(select);

	

	var tr=document.createElement("tr");

	tr.id="addtr"+count;

	tr.appendChild(td1);

	tr.appendChild(td2);

	insertAfter(tr,document.getElementById("addtr"+(count-1)));

	count++;

}



	





//insertAfter(select,first);

/*

for(var i=0;i<select.options.length;i++){

	alert(select.options[i].value+"-->"+select.options[i].innerText);

}

//insertAfter(select,document.getElementById("test").firstChild);

*/







</SCRIPT>





 </BODY>

</HTML>

BLUE_LG 2011-08-31

打赏
举报



<script>

var pic=document.getElementsByTagName("img");

pic[0].onclick=function(){

  var node=document.getElementsByTagName("select")[0];

  var new_node=document.createElement("div");

  new_node=node.cloneNode(true);

  document.body.appendChild(new_node);//楼主说的是在哪个下面？原本的table下面还是？这样不知道行不行。。。

}

</script>

wishifef 2011-08-31

打赏
举报



<script type="text/javascript">

	function addItem(){

		var frist=document.getElementById("tutorId0");

		var second=document.getElementById("tutorId1");



		alert(frist.options[frist.selectedIndex].innerText);



		second.appendChild(frist.options[frist.selectedIndex]);

	}

  </script>