在javascript中动态添加行获取计算

如何解决在javascript中动态添加行获取计算

我的输入框有问题，未显示任何值。

for i = 1:length(x_vals)
    syms f(y);
    f(y) = 3 * x_vals(i)^(7) + 2 * y^(5) - x_vals(i)^(3) + y^(3);
    df = diff(f,y);
    
    f_func = matlabFunction(f(y));
    f_prime = matlabFunction(df);
    a = 4;
    tolerance = 10.^-6;

    root(i) = Newton(f_func,f_prime,a,tolerance);
    %value(i) = G(x_vals(i),root(i));
    
    new_x = double(x_vals(i));
    new_y = double(root(i));
    
    value = 3 * new_x^7 + 2 * new_y^5 - new_x^3 + new_y^3;
    
    if (value >= -3 - e && value <= -3 + e)
        y_vals(i) = root(i);
        z_vals(i) = -3;
    end
end

var renumber = 0;

function addItem() {
  renumber++;
  var html = "<tr";
  html += "<td id='itemNum'>" + renumber + "</td>";
  html += "<td><input name='itemName[]'></td>";
  html += "<td><input name='itemDescription[]'></td>";
  html += "<td><span class='currency'>$</span><input id='perHour' value='0' name='amountPerHour[]'></td>";
  html += "<td><input id='lineHours' value='0' name='hours[]'></td>";
  html += "<td><span class='currency'>$</span><input id='linetotal' onblur='linetotal(this);' value='0' name='linetotal[]'></td>";
  html += "<td><button type='button' id='remove_button' onclick='removeItem();'> X </button></td>";
  html += "</tr>";
  document.getElementById("addItems").insertRow().innerHTML = html;
}

function removeItem() {
  document.getElementById("addItems").deleteRow(0);
  renumber--;
  var reorder = tblRow.rows;
  for(var i = 0; i < reorder.length; i++) {
    renumber[i];
    renumber++;
  }
  document.getElementById("itemNum").innerHTML = renumber;
}

function linetotal(elem) {
  var mainRow = document.getElementById(elem);
  var AmtPerHour = mainRow.getElementsByTagName('td').getElementById('perHour')[0].value;
  var lnHrs = mainRow.getElementsByTagName('td').getElementById('lineHours')[0].value;
  var total = mainRow.getElementsByTagName('td').getElementById('linetotal')[0];
  var myResult = AmtPerHour * lnHrs;
  total.value = myResult;
}

我最担心的是值没有出现。

第二个问题，但我可以忍受：
对于行，row1，row2，row3。如果我删除row2，我希望它成为row1，row2。
现在是第1行，第3行。我在说＃表部分。

有什么想法吗？

解决方法

您好，请在下面找到解决您的第一个和第二个问题的片段。 我对您的代码进行了一些修复。

1. 您的数据未显示，因为getElementById希望您将元素ID作为字符串传递，但是您正在将元素ID传递给它，因此此document.getElementById(elem)无法正常工作。

2. 您正在计算该字段变得模糊时的行总数，但是当用户对amount per hour或total hours进行更改时，也应该计算行总数，因此我也向这些字段添加了onblur。

3. 您的删除行始终删除第一行，无论我尝试删除哪一行（document.getElementById("addItems").deleteRow(0); 将始终删除表中的第一行），因此我添加了该函数的行引用，现在它将删除相应的行。

4. 我向您的Javascript添加了“到期金额总计”方法，以计算每次更新表（插入/删除行）时的到期金额，并更新标签值到期金额：0.00美元

5. 无论何时删除行，我都添加了对所有行重新编号的逻辑。 （您的第二个问题不再存在，所以不要再忍受它了。））。

var renumber = 0;

// trigger everytime there is change in the table row to calculate the new due amount.
function calculateDueAmount() {
  var tblRows = document.getElementById("addItems").getElementsByTagName('tr');
  let total = 0;
  for (var i = 0; i < tblRows.length; i++) {
    let lineTotal = tblRows[i].getElementsByTagName('td')[5].getElementsByTagName('input')[0].value;
    total += Number(lineTotal)
  }
  document.getElementById("amountDue").innerText = total.toFixed(2);
}
// no changes required in this
function addItem() {
  renumber++;
  var html = "<tr>";
  html += "<td id='itemNum'>" + renumber + "</td>";
  html += "<td><input name='itemName[]'></td>";
  html += "<td><input name='itemDescription[]'></td>";
  html += "<td><span class='currency'>$</span><input id='perHour' onblur='lineTotal(this);' value='0' name='amountPerHour[]'></td>";
  html += "<td><input id='lineHours' onblur='lineTotal(this);' value='0' name='hours[]'></td>";
  html += "<td><span class='currency'>$</span><input id='lineTotal' onblur='lineTotal(this);' value='0' name='lineTotal[]'></td>";
  html += "<td><button type='button' id='remove_button' onclick='removeItem(this);'> X </button></td>";
  html += "</tr>";
  document.getElementById("addItems").insertRow().innerHTML = html;
}
// updated and sanitized the logic to delete the row
function removeItem(elem) {

  let rowToDelete = elem.parentElement.parentElement;
  let rowNumber = rowToDelete.getElementsByTagName('td')[0].innerText;
  document.getElementById("addItems").deleteRow(rowNumber - 1);
  let tblRows = document.getElementById('addItems').getElementsByTagName('tr');
  let j = 0;
  for (; j < tblRows.length; j++) {
    tblRows[j].getElementsByTagName('td')[0].innerText = j + 1
  }
  calculateDueAmount(); // calculate due amount since row got deleted.
  renumber = j;
}

function lineTotal(elem) {
  var mainRow = elem.parentElement.parentElement;
  var AmtPerHour = mainRow.getElementsByTagName('td')[3].getElementsByTagName('input')[0].value;
  var lnHrs = mainRow.getElementsByTagName('td')[4].getElementsByTagName('input')[0].value;
  var total = mainRow.getElementsByTagName('td')[5].getElementsByTagName('input')[0];
  var myResult = Number(AmtPerHour) * Number(lnHrs);
  total.value = myResult;
  calculateDueAmount(); // calculate due amount since row got added
}

<table>
  <tr>
    <th>#</th>
    <th>Item Name</th>
    <th>Item Description</th>
    <th>Amount Per Hour</th>
    <th>Total Hours</th>
    <th>Line Total</th>
  </tr>

  <tbody id="addItems"></tbody>
</table>

<p>
  <button type="button" onclick="addItem();">
    Add Item
  </button>
</p>

<p>
  Amount Due: $<span id="amountDue">0.00</span>
  <script type="text/javascript">
    //add the amounts from all items.
    //if none added then have it set to zero.
  </script>
</p>

<p>
  Due Date:
  <script type="text/javascript">
    //start it 2 weeks from actual date
  </script>
</p>

<p>
  <input id="invoice_submit" type="submit" name="submit">
</p>