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

Question

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

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;
}

<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: $0.00
  <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>

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

第二个问题，但我可以忍受：
对于行，第 1 行、第 2 行、第 3 行。如果我删除第 2 行，我希望它是第 1 行，第 2 行。
现在它是第 1 行，第 3 行。我说的是 #table 部分。

有什么想法吗？

Answer 1

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

1. 您的数据未显示，因为 getElementById 期望您将元素 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>