簡體   English   中英

使用Javascript排除HTML表格中行和列的總和,不包括首尾

[英]Sum Total of Row and Column in HTML Table using Javascript Excluding First and Last

我正在嘗試使用從Javascript 2D數組創建的HTML表,並且試圖對表中的每一行和每一列進行求和,而不是每一行的第一行和第一行TD。

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.

不是我所知道的最漂亮的代碼,但這是我必須使用的代碼。 現在返回到每一行和每一列的總計的值離右邊不遠,並且它們還顯示重復的小數。 請幫忙。

對數組定義和表功能進行了一些更改。 將類別“ first”分配給month列,以防止將其添加到每一行中。 並使用.toFixed()函數將總數限制為兩個小數點。 第一個函數中有錯誤-計算每一行的總數-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.

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM