表組みの列合計値を求める

javascript html
最下行の列合計を自動で算出するサンプル。

jqueryで対象要素の後ろに挿入する場合はafter関数を使用すること！
また、挿入対象を一箇所に絞り込みたい場合はセレクタでそのように指定しないと、セレクタ指定全要素に挿入される！！(appendなども同様)

add関数は要素操作系の関数では無く、フィルタリング処理で使用するものなので気をつけること！！
<html>
<head>
<title>テーブル集計サンプル</title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
  var a_total = 0;
  var b_total = 0;
  var c_total = 0;
  
  $(".result-table > tbody > tr").each(function(){
   if($(this).attr("class") != "header-row"){
    a_total += parseInt($(this).children("td").filter(".eval-a-col").text());
    b_total += parseInt($(this).children("td").filter(".eval-b-col").text());
    c_total += parseInt($(this).children("td").filter(".eval-c-col").text());
   }
  });
  
  var total_row = $("<tr><td>合計</td><td class='eval-col'>" 
        + a_total + "</td><td class='eval-col'>" 
        + b_total + "</td><td class='eval-col'>" 
        + c_total + "</td><td class='eval-col'>" 
        + String(a_total + b_total + c_total) + "</td></tr>");
  $(".result-table > tbody > tr:last").after(total_row);
  
 });
</script>
<style type="text/css">
 table, td{
  border: 2px #000000 solid;
  border-collapse: collapse;
 }
 .insp_name-col{
  text-align: left;
 }
 .eval-col{
  text-align: right;
 }
</style>
</head>
<body>
<table class="result-table">
 <caption>結果値集計表</caption>
 <tbody>
  <tr class="header-row">
   <td class="insp-name-col">検査項目</td>
   <td class="eval-a-col">評価A</td>
   <td class="eval-b-col">評価B</td>
   <td class="eval-c-col">評価C</td>
   <td class="total-eval-col">総合評価</td>
  </tr>
  <tr class="detail-row">
   <td class="insp-name-col">検査AAAA</td>
   <td class="eval-a-col eval-col">50</td>
   <td class="eval-b-col eval-col">80</td>
   <td class="eval-c-col eval-col">30</td>
   <td class="total-eval-col eval-col">160</td>
  </tr>
  <tr class="detail-row">
   <td class="insp-name-col">検査AABB</td>
   <td class="eval-a-col eval-col">90</td>
   <td class="eval-b-col eval-col">30</td>
   <td class="eval-c-col eval-col">70</td>
   <td class="total-eval-col eval-col">190</td>
  </tr>
  <tr class="detail-row">
   <td class="insp-name-col">検査BBCC</td>
   <td class="eval-a-col eval-col">80</td>
   <td class="eval-b-col eval-col">80</td>
   <td class="eval-c-col eval-col">70</td>
   <td class="total-eval-col eval-col">230</td>
  </tr>
 </tbody>
</table>
</body>
</html>