效果图:(代码附在下方)
<!DOCTYPE>
<html><head>
<title></title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<table id="tableId">
<table border="1">
<thead>
<tr>
<th>aaa</th>
<th>bbb</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td><input type="text" name="" value="100" class="singleTotal" />
</td>
</tr>
<tr>
<td>February</td>
<td><input type="text" name="" value="200" class="singleTotal"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td><input type="text" name="" value="200" class="sum"></td>
</tr>
</tfoot>
</table>
</body>
<script type="text/javascript">
$(document).ready(function(){
function updateSum() {
var totalSum = 0;
$(".singleTotal").each(function() {
var p = $(this).parent().parent();
var sum = 0;
sum = parseInt(p.find("input:eq(0)").val());
// totalSum += sum;
if (isNaN(sum))
{
totalSum = totalSum;
}
else{
totalSum += sum;
}
});
$(".sum").val(totalSum);
}
updateSum();
//在按键抬起时,或者input.singleTotal输入框中的值改变时,自动更新input.sum 输入框
$(".singleTotal").bind("change keyup", function() {updateSum();
});
});
</script>
</html>