Javascript：我正在尝试在模态内创建动态 table 以进行摊销

Question

我正在尝试为摊销创建动态 table table 但我无法追加列。它每次都插入行，所以我的每个值都在新行中，我如何创建循环以便我的下一列应该是 +1。因为这是 row(0) 所以它每次都向上并且我的整个 table 显示颠倒。

我写到这里

function writeln(str) {
  var output = document.getElementById("output");
  var txt = document.createTextNode(str);
  var row = output.insertRow(0);
  var cell1 = row.insertCell(0);
  cell1.innerHTML = str;
}
function main() {
  for (var i = 1; i <= numpayments; ++i) {
    sumpay += payments;
    propertypriceapp = 0.0090 + propertypriceapp;
    var thisint = balance * intrate;
    sumint += thisint;

    var thisprin = payments - thisint;
    sumprin += thisprin;

    balance -= thisprin;

    var curvalequity = sumprin * (1 + propertypriceapp);

    writeln(flushright(i, 5));
      // flushright(fmtmoney(payments), 9) + "  " + 
      // flushright(fmtmoney(thisint), 9) + "  " + 
      // flushright(fmtmoney(thisprin), 8) + "  " + 
      // flushright(fmtmoney(sumpay), 9) + "  " + 
      // flushright(fmtmoney(sumint), 9) + "  " + 
      // flushright(fmtmoney1(sumprin), 9) + "  " + 
      // flushright(fmtmoney(balance), 12) + "   " +
      // flushright(fmtmoney1(curvalequity), 9) + "  " +
      writeln(flushright(fmtmoney1(propertypriceapp), 9));
    // write("----------------------------------------------------------------------------------------------------------------------")
    // writeln("")
  }
}

我的html代码是

<table class="modal-body" id="output">
        </table>

Answer 1

您的 writeln 函数每次调用时都会创建 1 行和 1 列。

它有 1 个不可用的变量 - var txt = document.createTextNode(str); 并且每次调用 DOM - var output = document.getElementById("output"); 性能不好，代码也很难看懂。

如果你想在 1 行中创建更多的列，你的代码必须是这样的：

var output = document.getElementById("output");

function writeln(str) {
    // str -> must be array, that have lenght = num of columns, you want to create
    var row = output.insertRow(0),
        len = str.lenght; // count of rows
    // creates rows 
    for (var i = 0; i < len; i++) {
        // create new row
        var cell = row.insertCell(i);
        // insert HTML code in it
        cell.innerHTML = str[i];    
    }
}

如果你想用列创建更多的行，你必须在循环中进行，并且每次在 var row = output.insertRow(j), 行中更改 j 参数。

Answer 2

这是上述问题的解决方案， str 转换成数组

temp = str.split(" "); // this will split string into ","

之后用于创建单元格的数组

var table=document.createElement('TABLE');
table.setAttribute('class','table table-striped table-bordered')//this is bootstraps classes
var tbdy=document.createElement('TBODY');
table.appendChild(tbdy);
function writeln(str) {
  var output = document.getElementById("output");
    var temp = new Array();
    temp = str.split("  ");
     var tr=document.createElement('TR');
     tbdy.appendChild(tr);
     for (var zxc2=0;zxc2<temp.length;zxc2++){
      var td=document.createElement('TD');
      td.appendChild(document.createTextNode(temp[zxc2]));
      tr.appendChild(td);
    }
  output.appendChild(table);
}

这样我得到了我的解决方案。

Javascript：我正在尝试在模态内创建动态 table 以进行摊销

Javascript: I am trying to create dynamic table inside modal for amortization

html

javascript

bootstrap-modal