Hi Experts,
I need some more help. I have a table with 4 columns and when the user clicks on a button it duplicates the first row. However, I need to change the onclick event of the new row to be onclick="selectTime(this,f
ield[nextr
ownumber])
". The problem is that when the new field is created it increases the number at the end of each field, so the copied onclick event is not working correctly. How can I create this onclick event ("selectTime(this,txtStart
Time1)") so that txtStartTime1 becomes txtStartTime[newrownumber]
?
Here is the code I am using to create the new row. The function selectTime is in a referenced js file if that makes a difference.
<script language="JavaScript" src="js/timepicker.js"></s
cript>
<script language="JavaScript">
function AddRow()
{
var dColor = '#E5E5E5';
var eColor = '#FFFFFF';
var idImg=["deleteStart","Star
tImg","Sto
pImg"];
var idText=["chkSelectStartTim
e","txtSta
rtTime", "txtStopTime", "txtStartStopComments"];
var tbl = document.getElementById('S
tartStop')
;
var ctr = tbl.rows.length;
if(tbl.rows.length == 7)
{
alert("Not allowed to enter more start/stop times to this time sheet. Please submit this timesheet and create another for more records.");
return false;
}
var tbd = tbl.getElementsByTagName('
tbody')[0]
;
var r = tbl.getElementsByTagName('
tr');
var c = r[1].cloneNode(true)
var sel = c.getElementsByTagName('im
g');
for(var i = 0;i<sel.length;i++)
{
sel[i].name = idImg[i] + ctr;
sel[i].id = idImg[i] + ctr;
if(sel[i].name == 'chkSelectStartTime' + ctr)
{
sel[i].disabled = false;
sel[i].alt = "Click icon to delete row.";
sel[i].style.backgroundCol
or = eColor;
sel[i].style.cursor = 'hand';
}
}
var sel = c.getElementsByTagName('in
put');
for(var i = 0;i<sel.length;i++)
{
sel[i].disabled = false;
sel[i].name = idText[i] + ctr;
sel[i].id = idText[i] + ctr;
sel[i].value = "";
}
tbd.insertBefore(c,tbl.row
s[tbl.rows
.length - 1]);
}
</script>
</head>
<body>
<form id="TimeSheet">
<input id="btnAdd" name="btnAdd;" onclick="AddRow()"
style="width: 75px; height: 22" type="button" value="Add Row">
<table id="StartStop" cellpadding="0" cellspacing="0" style="border-right: LightSteelBlue thin solid;
border-top: LightSteelBlue thin solid; border-left: LightSteelBlue thin solid;
border-bottom: LightSteelBlue thin solid; border-collapse: collapse;">
<tr>
<th style="width: 13px; height: 15px; border-bottom: LightSteelBlue thin solid;
border-right: LightSteelBlue thin solid; background-color: AntiqueWhite">
</th>
<th style="width: 95px; height: 19px; border-bottom: LightSteelBlue thin solid;
border-right: LightSteelBlue thin solid; background-color: AntiqueWhite">
Start Time</th>
<th style="width: 95px; height: 19px; border-bottom: LightSteelBlue thin solid;
border-right: LightSteelBlue thin solid; background-color: AntiqueWhite">
Stop Time</th>
<th style="width: 250px; height: 15px; border-bottom: LightSteelBlue thin solid;
border-right: LightSteelBlue thin solid; background-color: AntiqueWhite">
Comments</th>
</tr>
<tr>
<td align="center" style="width: 13px; height: 15px; border-bottom: LightSteelBlue thin solid;
border-right: LightSteelBlue thin solid">
<input id="chkSelectStartTime1" name="chkSelectStartTime1"
onclick="this.parentNode.p
arentNode.
parentNode
.removeChi
ld(this.pa
rentNode.p
arentNode)
;"
style="width: 13px; height: 15px; border: 0" type="checkbox" /></td>
<td style="width: 129px; height: 19px; border-bottom: LightSteelBlue thin solid;
border-right: LightSteelBlue thin solid">
<input id="txtStartTime1" maxlength="8" name="txtStartTime1"
readonly="readonly" size="8" style="width: 95px; height: 19px; border: 0;" type="text"
value="" />
<img name="StartImg1" alt="Pick a Start Time" border="0" height="19px" onclick="selectTime(this,t
xtStartTim
e1)"
src="images/timepicker.gif
" style="cursor: hand" width="30">
</td>
<td style="width: 129px; height: 19px; border-bottom: LightSteelBlue thin solid;
border-right: LightSteelBlue thin solid">
<input id="txtStopTime1" maxlength="8" name="txtStopTime1"
readonly="readonly" size="8" style="width: 95px; height: 19px; border: 0;" type="text"
value="" />
<img name="StopImg1" alt="Pick a Stop Time" border="0" height="19px" onclick="selectTime(this,t
xtStopTime
1)"
src="images/timepicker.gif
" style="cursor: hand" width="30">
</td>
<td style="width: 250px; height: 15px; border-bottom: LightSteelBlue thin solid;
border-right: LightSteelBlue thin solid">
<input maxlength="195px" name="txtStartStopComments
1" style="width: 250px; height: 19px; border: 0"
type="text" />
</td>
</tr>
<tr style="visibility:hidden">
<td></td><
/tr>
</table>
Start Free Trial