Textboxes in asp:repeater with total row
I have a asp:repeater which repeats 2 columns of textboxes inside a table. I also have totals textboxs underneath the repeater (not in the footer of the repeater).
When the user leaves a textbox (onblur), I want to set the total for that column to the sum of the textboxes in the textboxes column.
I add a blur event to all textboxes in the tables tds. In the blur event, I attempt to get the inputs from the same column as the current textbox.
However the blur event works on tb1 only. I am also unsure as to how I would determine which total input to add the value to when in the blur.
I wondered if anyone could give me some hints.
I have included the rendered code below.
Thanks in advance.
-
<script>
$(document).ready(function(){
//get each td in each row in the table
$("#values tr td").each(function () {
//find all textboxes in the TD and add an onblur event
jQuery(this).children("input:text").blur(function () {
//sum textboxes in this column and store the value in the total
$("#tbtotal1").val(0);
//get the first textbox in each row
$("#values tr").each(function () {
//for each row
//get the first td
var td = jQuery(this).children("td")[0];
//get the first textbox
alert(jQuery(td).children("input:text")[0].value);
//get the second td
var td = jQuery(this).children("td")[1];
//get the second textbox
alert(jQuery(td).children("input:text")[0].value);
});
});
//add the value of the first textbox of each row to the total textbox on page load
$("#tbtotal1").val(parseInt($("#tbtotal1").val()) + parseInt(jQuery(this).children("input:text")[0].value));
$("#tbtotal2").val(parseInt($("#tbtotal2").val()) + parseInt(jQuery(this).children("input:text")[1].value));
});
});
</script>
<table id="values">
<tr>
<td>
<input name="tb1" id="tb1" type="text" value="1">
</td>
<td>
<input name="tb1" id="tb2" type="text" value="2">
</td>
</tr>
<tr>
<td>
<input name="tb1" id="tb4" type="text" value="4">
</td>
<td>
<input name="tb1" id="tb5" type="text" value="5">
</td>
</tr>
<tr>
<td>
<input name="tb1" id="tb7" type="text" value="7">
</td>
<td>
<input name="tb1" id="tb8" type="text" value="8">
</td>
</tr>
<table>
<input name="tbtotal1" id="tbtotal1" type="text" value="0">
<input name="tbtotal2" id="tbtotal2" type="text" value="0">