Need Help with cloning a table row and then giving Unique field Name to the cloned Row

X-quisite
X-quisite used Ask the Experts™
on
I need help with setting unique field names to a cloned table row.

 there original table:

<div id="event_x" name="" class="thelanguage">
                                <table id="tbl_eventCapSummary" width="810" border="0" cellpadding="" cellspacing="" style=" margin: 0px 0px 20px 10px; font-size: 12px; color:#000; border-collapse: collapse">
                                  <tr height="30px;" style="font-weight: bold; text-indent: 5px; font-size: 14px;">
                                    <td colspan="4">Event Details</td>
                                    <td colspan="5">Camera Details</td>
                                  </tr>
                                  <tr height="30px;" style="font-weight: bold; text-indent: 5px; font-size: 14px; border-bottom: 1px solid #BEBEBE;">
                                        <td>date</td>
                                    <td>type</td>
                                    <td>description</td>
                                    <td colspan="1" style="border-bottom: 1px solid #fff; width: 90px;">&nbsp;</td>
                                    <td>no</td>
                                    <td>type</td>
                                    <td>start</td>
                                    <td>finish</td>
                                    <td>hrs</td>
                                  </tr>
                                  <tr height="2px;"><td colspan="8"></td></tr>
                                  <tr height="30px;" style="text-indent: 5px; font-size: 14px;">
                                        <td><label id="event" name="date[]" type="text" value="Mon 12th Aug 2009">Mon 12th Aug 2009</label></td>
                                    <td>wedding</td>
                                    <td>ceremony</td>
                                    <td colspan="1" style="border-bottom: 1px solid #fff; width: 90px;">&nbsp;</td>
                                    <td>1</td>
                                    <td>main</td>
                                    <td><select id="mainCameraStart" name="startTime[]"><option  value="">Select</option></select></td>
                                    <td><select id="mainCameraFinish" name="finishTime[]"><option value="">Select</option></select></td>
                                    <td><label id="mainCameraHrs" name="mainCameraHrs[]" type="text" value="3" >3.0 </label></td>
                                  </tr>
                                  <tr height="2px;"><td colspan="8"></td></tr>
                                  <tr id="cameraDetails" height="30px;" style="text-indent: 5px; font-size: 14px;">
                                        <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td colspan="1" style="border-bottom: 1px solid #fff; width: 90px;">&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>
                                          <select id="event_x_cameraType" name="cameraType[]">
                                                <option  value="none">Select</option>
                                            <option value="none">Additional</option>
                                            <option  value="none">Assitant</option>
                                            <option value="none">Assitant</option>
                                        </select></td>
                                    <td><select><option id="" name="" value="">Select</option></select></td>
                                    <td><select><option id="" name="" value="">Select</option></select></td>
                                    <td><input type="button" id="addCamera" name="addCamera"  value="add" onclick="cloneCamera();" /></td>
                                  </tr>
                                  <tr height="2px;"><td colspan="8"></td></tr>
                                 
                                </table>


heres the java script function:


function newEventCam()
            {
                        
                  var tableObj = document.getElementById('tbl_eventCapSummary');
                  
                  var origRow = document.getElementById('cameraDetails'); // row that i am cloning
                  var clonedRow = origRow.cloneNode(true);
                  clonedRow.id = "cloned" + origRow.id ; //or whatever logic you want keep
                  //var button = document.getElementById('addCamera'); //access to the button, check the index though
                  //var button = clonedRow.childNodes[9];
                  var button = clonedRow.getElementByTagName('input');
                  button.id = "add_new_event_today";
                  button.value="delete";
                  button.onclick="corruption()";
                  
                  tableObj.appendChild( clonedRow );
            }


Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Your code is almost perfect!!! The only problem is this little mistake.

var button = clonedRow.getElementByTagName('input');

It should be

var button = clonedRow.getElementsByTagName('input')[0];
<script>
	function newEventCam()
	{
		  var tableObj = document.getElementById('tbl_eventCapSummary');
		  
		  var origRow = document.getElementById('cameraDetails'); // row that i am cloning
		  var clonedRow = origRow.cloneNode(true);
		  clonedRow.id = "cloned" + origRow.id ; //or whatever logic you want keep
		  //var button = document.getElementById('addCamera'); //access to the button, check the index though
		  //var button = clonedRow.childNodes[9];
		  var button = clonedRow.getElementsByTagName('input')[0];
		  button.id = "add_new_event_today";
		  button.value="delete";
		  button.onclick="corruption()";
		  
		  tableObj.appendChild( clonedRow );
	}
</script>

Open in new window

Author

Commented:
sleppindevil,

var button = clonedRow.getElementsByTagName('input')[0];
i tried that earlier : i get the following error in firebug:
Break on ErrorCopy
clonedRow.getElementByTagName is not a function  
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

HonorGodSoftware Engineer

Commented:
it's plural...

getElementsByTagName

Note that Elements has the trailing s
Alright I had a go at your unique ID thing. I also fixed the onclick event definition part.

This works as it is intended to work on FireFox for me. On IE it does not work. And worse yet no error message at all on IE
<html>
<head>

</head>
<body>

<div id="event_x" name="" class="thelanguage">
                                <table id="tbl_eventCapSummary" width="810" border="0" cellpadding="" cellspacing="" style=" margin: 0px 0px 20px 10px; font-size: 12px; color:#000; border-collapse: collapse">
                                  <tr height="30px;" style="font-weight: bold; text-indent: 5px; font-size: 14px;">
                                    <td colspan="4">Event Details</td>
                                    <td colspan="5">Camera Details</td>
                                  </tr>
                                  <tr height="30px;" style="font-weight: bold; text-indent: 5px; font-size: 14px; border-bottom: 1px solid #BEBEBE;">
                                        <td>date</td>
                                    <td>type</td>
                                    <td>description</td>
                                    <td colspan="1" style="border-bottom: 1px solid #fff; width: 90px;">&nbsp;</td>
                                    <td>no</td>
                                    <td>type</td>
                                    <td>start</td>
                                    <td>finish</td>
                                    <td>hrs</td>
                                  </tr>
                                  <tr height="2px;"><td colspan="8"></td></tr>
                                  <tr height="30px;" style="text-indent: 5px; font-size: 14px;">
                                        <td><label id="event" name="date[]" type="text" value="Mon 12th Aug 2009">Mon 12th Aug 2009</label></td>
                                    <td>wedding</td>
                                    <td>ceremony</td>
                                    <td colspan="1" style="border-bottom: 1px solid #fff; width: 90px;">&nbsp;</td>
                                    <td>1</td>
                                    <td>main</td>
                                    <td><select id="mainCameraStart" name="startTime[]"><option  value="">Select</option></select></td>
                                    <td><select id="mainCameraFinish" name="finishTime[]"><option value="">Select</option></select></td>
                                    <td><label id="mainCameraHrs" name="mainCameraHrs[]" type="text" value="3" >3.0 </label></td>
                                  </tr>
                                  <tr height="2px;"><td colspan="8"></td></tr>
                                  <tr id="cameraDetails" height="30px;" style="text-indent: 5px; font-size: 14px;">
                                        <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td colspan="1" style="border-bottom: 1px solid #fff; width: 90px;">&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>
                                          <select id="event_x_cameraType" name="cameraType[]">
                                                <option  value="none">Select</option>
                                            <option value="none">Additional</option>
                                            <option  value="none">Assitant</option>
                                            <option value="none">Assitant</option>
                                        </select></td>
                                    <td><select><option id="" name="" value="">Select</option></select></td>
                                    <td><select><option id="" name="" value="">Select</option></select></td>
                                    <td><input type="button" id="addCamera" name="addCamera"  value="add" onclick="cloneCamera();" /></td>
                                  </tr>
                                  <tr height="2px;"><td colspan="8"></td></tr>
                                  
                                </table>


<a onclick="javascript:newEventCam();">ADD A ROW</a>

<script>
	function corruption(e) { 
		alert(this.id); 
	};

	var rowID = 0;
	function newEventCam()
	{
		rowID++;
		var tableObj = document.getElementById('tbl_eventCapSummary');
		  
		var origRow = document.getElementById('cameraDetails'); // row that i am cloning
		var clonedRow = origRow.cloneNode(true);
			clonedRow.id = origRow.id+"_"+rowID ; //or whatever logic you want keep
		//var button = document.getElementById('addCamera'); //access to the button, check the index though
		//var button = clonedRow.childNodes[9];
		var buttonOri = clonedRow.getElementsByTagName('input')[0];
		var button = buttonOri;
			button.id = buttonOri.id+"_"+rowID;
			button.value = "delete";
			button.onclick = corruption;
		
		var selectsOri = clonedRow.getElementsByTagName('select');
		for(var i=0; i<selectsOri.length; i++) {
			selectsOri[i].id = selectsOri[i].id+"_"+rowID;
		}
		
		tableObj.appendChild( clonedRow );
		
	}
</script>
			
</body>
</html>

Open in new window

Everytime the newEventCam() function is run, it increases the value of rowID, which is the suffix added onto the row id, button id, selects ids. So the new rows will have elements like

1)first row added:
cameraDetails_1
addCamera_1
event_x_cameraType_1

2)second row added:
cameraDetails_2
addCamera_2
event_x_cameraType_2

Author

Commented:
honourgod,
you are correct the plural did the trick.
1)
however, there are two issues: the button.onclick does not get set and keeps the original, but all other attributes are updated correctly.


2)when i add the new row its not appended to the tbody tag, its outside but inside the table

Author

Commented:
sleepingdevil,

there is another function that i did give, which actually calls the NewEvenCam()

function cloneCamera() {
                $('#camera-template').contents().clone().appendTo('#camera');
                $(".technology").unbind()
                ddaccordion.init(accordionsetting)
                        newEventCam();
        }
X-quisite the right way to add an on-event to an element is the way I have shown in the code snippet with my previous comment.

As for the tbody, check the code snippet I added on this comment. The last line of the function newEventCam() deals with the tbody.
<script>
	function corruption(e) { //just a temp function i put in place to test the onclick, delete this when you have your own corruption() function
		alert(this.id); 
	};

	var rowID = 0;
	function newEventCam()
	{
		rowID++;
		var tableObj = document.getElementById('tbl_eventCapSummary');
		  
		var origRow = document.getElementById('cameraDetails'); // row that i am cloning
		var clonedRow = origRow.cloneNode(true);
			clonedRow.id = origRow.id+"_"+rowID ; //or whatever logic you want keep
		//var button = document.getElementById('addCamera'); //access to the button, check the index though
		//var button = clonedRow.childNodes[9];
		var buttonOri = clonedRow.getElementsByTagName('input')[0];
		var button = buttonOri;
			button.id = buttonOri.id+"_"+rowID;
			button.value = "delete";
			button.onclick = corruption;
		
		var selectsOri = clonedRow.getElementsByTagName('select');
		for(var i=0; i<selectsOri.length; i++) {
			selectsOri[i].id = selectsOri[i].id+"_"+rowID;
		}
		
		tableObj.getElementsByTagName('tbody')[0].appendChild( clonedRow );
		
	}
</script>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial