Javascript合計テーブル条件付き

debugcn 投稿 Dev

ブライアン

2列のテーブルの値を合計する必要があります。ここで、col2が空白でない場合は各行について、合計に追加します。それ以外の場合は、代わりにcol1を追加します。次に、合計をdivに公開します

以下は私が試したものですが、空白を出力します。

var table = document.getElementById("PLTable");
    var cost_est = document.getElementsByClassName("cost_estimate");
    var act_cost = document.getElementsByClassName("act_cost");
    var sum2 = 0;
    for (var i = 0, row; row = table.rows[i]; i++) {
       if (act_cost[i].innerText>0) {
         sum2 += act_cost[i].innerText;
       }
       else {
         sum2 += cost_est[i].innerText;
       }
    }
    document.getElementById("cost_projected_total").innerHTML = sum2

<!--HTML data looks like this:-->

    <table id="PLTable">
      <thead>
        <tr>
          <th>cost estimate</th>
          <th>cost actual</th>
        </tr>
      </thead>
        <tr>
          <td class = "cost_estimate">100</td>
          <td class = "act_cost"></td>
        </tr>
        <tr>
          <td class = "cost_estimate">100</td>
          <td class = "act_cost">50</td>
        </tr>
    </table>
    
    <div id="cost_projected_total">
    </div>

正しい出力はsum2 = 150である必要があり、その結果はdiv内に出力される必要があります。

何か案は？

briosheje

コードで対処すべき点がいくつかあります。

何が悪かったのか、どのように変更すべきかを要約しようと思います。

table.rows 実際にはヘッドもループするため、インデックスは範囲外になります。
innerTextテキストを返すため、Number最初にその値を最初に変換する必要があります。そうしないと、文字列が連結されます。

したがって、基本的に、コードを現在の状態に保つために私が行ったことは次のとおりです。

追加しました tbody
行table.rows数に変更されましたtbody。
ループした項目の両方の数値を取得しました。

以下は、上記の変更と修正を加えた作業コードです。かなり短くなっている可能性があります。最適なソリューションに依存することなく、どこで何が間違っているのかを理解できるように、コードをできるだけ近くに置いておきたいと思います。

var table = document.getElementById("PLTable");
var tbody = table.getElementsByTagName('tbody')[0];
var cost_est = document.getElementsByClassName("cost_estimate");
var act_cost = document.getElementsByClassName("act_cost");
var sum2 = 0;

for (var i = 0; i < tbody.getElementsByTagName('tr').length; i++) {
   var row_act_cost = Number(act_cost[i].innerText);
   var row_cost_est = Number(cost_est[i].innerText);
   if (row_act_cost > 0) {
     sum2 += row_act_cost;
   }
   else {
     sum2 += row_cost_est;
   }

}
document.getElementById("cost_projected_total").innerHTML = sum2;

<table id="PLTable">
  <thead>
    <tr>
      <th>cost estimate</th>
      <th>cost actual</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class = "cost_estimate">100</td>
      <td class = "act_cost"></td>
    </tr>
    <tr>
      <td class = "cost_estimate">100</td>
      <td class = "act_cost">50</td>
    </tr>
   </tbody>
</table>

<div id="cost_projected_total">
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]