Attaching functions to elements in a loop
- by user435377
I have the following HTML and JavaScript it works for the first set of elements when I have a '1' in the selector but when I replace the '1' with an 'i' it doesn't attach itself to any of the elements. Any ideas as to why this might not be working? (the script is meant to add the first 3 columns of each row and display it in the fourth)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
for (i = 2; i <= 14; i++)
{
$("#Q19_LND_"+i).keyup(function(){
$("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val()));
});
$("#Q19_CE_"+i).keyup(function(){
$("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val()));
});
$("#Q19_SOLSD_"+i).keyup(function(){
$("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val()));
});
}
});
</script>
</head>
<body>
<table>
<tr>
<td><font face="arial" size="-1">Lap Roux-N-Y</font> </td>
<td align="center"><input tabindex="1" type="text" name="Q19_LND_1" size="3" value="" id="Q19_LND_1"></td>
<td align="center"><input tabindex="2" type="text" name="Q19_CE_1" size="3" value="" id="Q19_CE_1"></td>
<td align="center"><input tabindex="3" type="text" name="Q19_SOLSD_1" size="3" value="" id="Q19_SOLSD_1"></td>
<td align="center"><input tabindex="4" disabled type="text" name="autoSumRow_1" size="3" value="" id="autoSumRow_1"></td>
</tr>
<tr>
<td nowrap width="1" bgcolor="#006699" colspan="9"><img src="/images/wi/nothing.gif" width="1" height="1"></td>
</tr>
<tr>
<td><font face="arial" size="-1">Lap Esophagectomy</font> </td>
<td align="center"><input tabindex="5" type="text" name="Q19_LND_2" size="3" value="" id="Q19_LND_2"></td>
<td align="center"><input tabindex="6" type="text" name="Q19_CE_2" size="3" value="" id="Q19_CE_2"></td>
<td align="center"><input tabindex="7" type="text" name="Q19_SOLSD_2" size="3" value="" id="Q19_SOLSD_2"></td>
<td align="center"><input tabindex="8" disabled type="text" name="autoSumRow_2" size="3" value="" id="autoSumRow_2"></td>
</tr>
<tr>
</table>
</body>
</html>
