X-quisite
asked on
Need Help with cloning a table row and then giving Unique field Name to the cloned Row
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;"> </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;"> </td>
<td>1</td>
<td>main</td>
<td><select id="mainCameraStart" name="startTime[]"><option
<td><select id="mainCameraFinish" name="finishTime[]"><optio
<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> </td>
<td> </td>
<td> </td>
<td colspan="1" style="border-bottom: 1px solid #fff; width: 90px;"> </td>
<td> </td>
<td>
<select id="event_x_cameraType" name="cameraType[]">
<option value="none">Select</optio
<option value="none">Additional</o
<option value="none">Assitant</opt
<option value="none">Assitant</opt
</select></td>
<td><select><option id="" name="" value="">Select</option></
<td><select><option id="" name="" value="">Select</option></
<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('t
var origRow = document.getElementById('c
var clonedRow = origRow.cloneNode(true);
clonedRow.id = "cloned" + origRow.id ; //or whatever logic you want keep
//var button = document.getElementById('a
//var button = clonedRow.childNodes[9];
var button = clonedRow.getElementByTagN
button.id = "add_new_event_today";
button.value="delete";
button.onclick="corruption
tableObj.appendChild( clonedRow );
}
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;"> </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;"> </td>
<td>1</td>
<td>main</td>
<td><select id="mainCameraStart" name="startTime[]"><option
<td><select id="mainCameraFinish" name="finishTime[]"><optio
<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> </td>
<td> </td>
<td> </td>
<td colspan="1" style="border-bottom: 1px solid #fff; width: 90px;"> </td>
<td> </td>
<td>
<select id="event_x_cameraType" name="cameraType[]">
<option value="none">Select</optio
<option value="none">Additional</o
<option value="none">Assitant</opt
<option value="none">Assitant</opt
</select></td>
<td><select><option id="" name="" value="">Select</option></
<td><select><option id="" name="" value="">Select</option></
<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('t
var origRow = document.getElementById('c
var clonedRow = origRow.cloneNode(true);
clonedRow.id = "cloned" + origRow.id ; //or whatever logic you want keep
//var button = document.getElementById('a
//var button = clonedRow.childNodes[9];
var button = clonedRow.getElementByTagN
button.id = "add_new_event_today";
button.value="delete";
button.onclick="corruption
tableObj.appendChild( clonedRow );
}
check this link on how to generate a unique id in javascript
http://forumsblogswikis.com/2008/05/26/how-to-generate-a-unique-id-in-javascript/
https://www.experts-exchange.com/questions/21391346/Unique-ID-in-Javascript.html
http://stackoverflow.com/questions/1463966/how-to-assign-unique-dom-element-id
http://forumsblogswikis.com/2008/05/26/how-to-generate-a-unique-id-in-javascript/
https://www.experts-exchange.com/questions/21391346/Unique-ID-in-Javascript.html
http://stackoverflow.com/questions/1463966/how-to-assign-unique-dom-element-id
ASKER
sleppindevil,
var button = clonedRow.getElementsByTag
i tried that earlier : i get the following error in firebug:
Break on ErrorCopy
clonedRow.getElementByTagN
var button = clonedRow.getElementsByTag
i tried that earlier : i get the following error in firebug:
Break on ErrorCopy
clonedRow.getElementByTagN
it's plural...
getElementsByTagName
Note that Elements has the trailing s
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
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;"> </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;"> </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> </td>
<td> </td>
<td> </td>
<td colspan="1" style="border-bottom: 1px solid #fff; width: 90px;"> </td>
<td> </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>
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
1)first row added:
cameraDetails_1
addCamera_1
event_x_cameraType_1
2)second row added:
cameraDetails_2
addCamera_2
event_x_cameraType_2
ASKER
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
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
ASKER
sleepingdevil,
there is another function that i did give, which actually calls the NewEvenCam()
function cloneCamera() {
$('#camera-template').cont
$(".technology").unbind()
ddaccordion.init(accordion
newEventCam();
}
there is another function that i did give, which actually calls the NewEvenCam()
function cloneCamera() {
$('#camera-template').cont
$(".technology").unbind()
ddaccordion.init(accordion
newEventCam();
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
sleeping devil,
i have a followon question
https://www.experts-exchange.com/questions/25097644/need-help-with-some-javascript-code-and-logic-for-cloned-elements.html
i have a followon question
https://www.experts-exchange.com/questions/25097644/need-help-with-some-javascript-code-and-logic-for-cloned-elements.html
var button = clonedRow.getElementByTagN
It should be
var button = clonedRow.getElementsByTag
Open in new window