2017-04-25 11 views
0

Javascript 2D配列から作成されたHTMLテーブルを取得しようとしていますが、テーブル内の各行と列の合計を取得しようとしています各行の先頭行と最初のTD。Javascriptを使用してHTMLテーブル内の行と列の合計を最初と最後を除いて

var pandlarray = [ 
[2017-04,0,-118.05,-181.21,-400.43,0] 
[2017-05,1510.27,-35.34,-180.99,-351.46,0] 
]; 
// BEGIN - Create HTML table from javascript array. 
function makeTableHTML(myArray) { 
    var result = "<table id='pandltable'>"; 
    result += "<tr><td>Month</td><td>Revenue</td><td>MaterialCost</td><td>Utilities</td><td>Labor</td><td>Margin</td></tr>"; 
    for(var a=0; a<myArray.length; a++) { 
     result += "<tr>"; 
     for(var j=0; j<myArray[a].length; j++){ 
     if (myArray[a][j] === 0) { 
      result += "<td>"+0+"</td>"; 
     } 
     else { 
      result += "<td>"+myArray[a][j]+"</td>"; 
     } 
     } 
     result += "</tr>"; 
    } 
    result += "<tr><td><strong>Total<strong></td><td></td><td></td><td></td><td></td><td></td></tr></table>"; 
    return result; 
    } 
    document.write(makeTableHTML(pandlarray)); 
    // END - Create HTML table from javascript array. 
    // BEGIN - Total row and columns for pandltable. 
    $("#pandltable tr:not(:first,:last) td:last-child").text(function(){ 
    var t = 0; 
    $(this).prevAll().each(function(){ 
     t += t += parseFloat($(this).text(),0) || 0; 
    }); 
    return t; 
    }); 

    $("#pandltable tr:last td:not(:first)").text(function(i){ 
    var t = 0; 
    $(this).parent().prevAll().find("td:nth-child("+(i + 2)+")").each(function(){ 
     t += parseFloat($(this).text(),0) || 0; 
    }); 
    return t; 
    }); 
    // END - Total row and columns for pandltable. 

私が知っている最も美しいコードではありませんが、これは私が処理しなければならないものです。それぞれの行と列の合計に今すぐ戻っている値はすぐ近くにありませんし、繰り返しの小数点も表示しています。助けてください。

答えて

0

配列定義とテーブル作成機能を少し変更しました。各行に追加されないように、 'first' to month列を割り当てます。 .toFixed()関数を使用して合計を2小数点に制限しました。最初の関数にエラーがあります - 各行の合計を計算します - t + = t + = - これは誤字かもしれません。

var pandlarray = ["2017-04,0,-118.05,-181.21,-400.43,0", 
    "2017-05,1510.27,-35.34,-180.99,-351.46,0" 
    ]; 
    // BEGIN - Create HTML table from javascript array. 
    function makeTableHTML(myArray) { 
     var result = "<table id='pandltable'>"; 
     result += "<tr><td width='20%'>Month</td><td width='20%'>Revenue</td><td width='20%'>MaterialCost</td><td width='20%'>Utilities</td><td width='20%'>Labor</td><td width='20%'>Margin</td></tr>"; 
     for(var a=0; a<myArray.length; a++) { 
     var thisRow = myArray[a].split(","); 

      result += "<tr>"; 
      for(var j=0; j<thisRow.length; j++){ 
      if (j === 0) { 
       result += "<td class='first'>"+thisRow[j]+"</td>"; 
      } 
      else { 
       result += "<td>"+thisRow[j]+"</td>"; 
      } 
      } 
      result += "</tr>"; 
     } 
     result +="<tr><td colspan=6>&nbsp;</td> </tr>"; 
     result += "<tr><td><strong>Total<strong></td><td></td><td></td><td></td><td></td><td></td></tr></table>"; 
     return result; 
     } 

     document.write(makeTableHTML(pandlarray)); 
     // END - Create HTML table from javascript array. 
     // BEGIN - Total row and columns for pandltable. 
     $("#pandltable tr:not(:first,:last) td:last-child").text(function(){ 
     var t = 0; 
     $(this).prevUntil(".first").each(function(){ 
      t += parseFloat($(this).text(),2) || 0; 
     }); 
     t = t.toFixed(2); 
     return t; 
     }); 

     $("#pandltable tr:last td:not(:first)").text(function(i){ 
     var t = 0; 
     $(this).parent().prevAll().find("td:nth-child("+(i + 2)+")").each(function(){ 
      t += parseFloat($(this).text(),0) || 0; 
     }); 
     t = t.toFixed(2); 
     return t; 
     }); 
     // END - Total row and columns for pandltable. 
関連する問題