1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
|
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
function tally (selector)
{
$(selector).each(function ()
{
var total = 0,
column = $(this).siblings(selector).andSelf().index(this);
$(this).parents().prevUntil(':has(' + selector + ')').each(function ()
{
total += parseFloat($('td.sum:eq(' + column + ')', this).html()) || 0;
})
$(this).html(total);
});
}
tally('td.subtotal');
tally('td.total');
});
</script>
</head>
<body>
<table border="1" width="500" id="data">
<thead>
<tr align="center" bgcolor="#CCCCCC">
<th>Name</th>
<th>Age</th>
<th>Weight</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>Joe</td>
<td class="sum">1</td>
<td class="sum">200</td>
<td class="sum">1</td>
</tr>
<tr align="center">
<td>Jack</td>
<td class="sum">29</td>
<td class="sum">100</td>
<td class="sum">1</td>
</tr>
<tr>
<td colspan="4"><hr></td>
</tr>
</tbody>
<tfoot>
<tr align="center" bgcolor="#00CCFF">
<th colspan="1" align="right"> </th>
<td class="total"></td>
<td class="total"></td>
<td class="total"></td>
</tr>
</tfoot>
</table>
</body>
</html> |
Partager