JavaScript 文本框添加

Question

我正在处理创建发票的表单。 所以基本上，我有一个按钮来创建一个表格行，我可以在其中输入代码、产品名称、注释、数量、价格和折扣。然后自动添加总价，乘以数量并减去折扣。

我遇到的问题是获取需要添加的行索引。第一行有效，但第二、第三等……无效。

我在这里问也许有人可以找到问题。我是 javascript 的初学者，基本上是在学习的同时学习，所以非常感谢它的任何帮助。

// Item Counter
var ic = 1;

// Remove an entry 
function RemoveEntryFromList(entry) {
  document.getElementById(entry).remove();
}

// Adds an entry into the "Added Items" list
function addEntryToList(p_code, p_name, p_sn, p_qty, p_price, p_discount, p_url, p_costPrice, p_qtyAvailable) {
  var entry = document.createElement("tr");
  entry.id = ("item-" + String(ic));
  document.getElementById("list-table").tBodies[0].appendChild(entry);
  p_price1 = parseFloat(p_price).toFixed(2);
  p_costPrice1 = parseFloat(p_costPrice).toFixed(2);

  entry.innerHTML = `<td><input value="${p_code}" /></td>
                                    <td><input value="${p_name}" /></td>
                                    <td><input value="${p_sn}" /></td>
                                    <td><input type="text" id="qty" value="${p_qty}" oninput="calculate()" /></td>
                                    <td><input type="text" id="price" step="0.01" min="0.00" value="${p_price1}" oninput="calculate()" /></td>
                                    <td><input type="text" id="discount" value="${p_discount}" oninput="calculate()" /></td>
                                    <td><input type="number" id="net_price" readonly /></td>
                                    <td style="text-align: center;"><button onclick="RemoveEntryFromList('${entry.id}')">&nbsp;X&nbsp;</button></td>
                                    <td style="text-align: center; cursor: pointer;"><i class="fas fa-ellipsis-v"></i></td>`;
  ic++;
}

function calculate() {
  var calc_qty = document.getElementById('qty').value;
  var calc_price = document.getElementById('price').value;
  var discount = document.getElementById('discount').value;
  var result = document.getElementById('net_price');
  var calc_discount = calc_price * (discount / 100);
  var calc_result = (calc_price - calc_discount) * calc_qty;
  result.value = calc_result;
}

<div id="container">
  <div id="list-sect">
    <button id="add-custom-item-btn" onClick="addEntryToList('', '', '', '1', '0.00', '0');" style="height: 30px;">
                <i class="fas fa-box-open"></i> Add New Entry
            </button>
  </div>

  <table id="list-table">
    <tr class="list-entry" style="height: 21px;">
      <th width="80px">Code</th>
      <th>Name</th>
      <th>notes</th>
      <th width="60px">Qty</th>
      <th width="76px">Price</th>
      <th width="65px">Disc.(%)</th>
      <th width="76px">Total Price</th>
      <th colspan="2">Remove</th>
    </tr>
  </table>
</div>

Answer 1

不要在生成的代码中使用 id，id 必须是唯一的。我把它们改成了类。我还更改了计算函数，因此将目标元素作为参数给出。在计算函数中，根据参数中的元素找到正确的元素。

但这是一种非常丑陋的处理方式。我建议重写它，这样你就可以在你的桌子上进行事件委托，就像下面的函数一样。如果您不想要，请查看底部的 sn-p。

//Event delgation from the table as replacement of the calculate function
document.querySelector('#list-table').addEventListener('input', function(e) {
  //Element that triggered
  let target = e.target;
  //check if the target has the class of one of our input elements that we want to use for (re)calculation
  if (target.classList.contains('qty') ||
    target.classList.contains('price') ||
    target.classList.contains('discount') ||
    target.classList.contains('net_price')
  ) {
    //(re)calculate
    var targetRow = target.parentElement.parentElement;
    
    var calc_qty = targetRow.querySelector('.qty').value;
    var calc_price = targetRow.querySelector('.price').value;
    var discount = targetRow.querySelector('.discount').value;
    var result = targetRow.querySelector('.net_price');
    var calc_discount = calc_price * (discount / 100);
    var calc_result = (calc_price - calc_discount) * calc_qty;
    result.value = calc_result;
  }
});

// Item Counter
var ic = 1;

// Remove an entry 
function RemoveEntryFromList(entry) {
  document.getElementById(entry).remove();
}

// Adds an entry into the "Added Items" list
function addEntryToList(p_code, p_name, p_sn, p_qty, p_price, p_discount, p_url, p_costPrice, p_qtyAvailable) {
  var entry = document.createElement("tr");
  entry.id = ("item-" + String(ic));
  document.getElementById("list-table").tBodies[0].appendChild(entry);
  p_price1 = parseFloat(p_price).toFixed(2);
  p_costPrice1 = parseFloat(p_costPrice).toFixed(2);

  entry.innerHTML = `<td><input value="${p_code}" /></td>
                                    <td><input value="${p_name}" /></td>
                                    <td><input value="${p_sn}" /></td>
                                    <td><input type="text" class="qty" value="${p_qty}" /></td>
                                    <td><input type="text" class="price" step="0.01" min="0.00" value="${p_price1}" /></td>
                                    <td><input type="text" class="discount" value="${p_discount}" /></td>
                                    <td><input type="number" class="net_price" readonly /></td>
                                    <td style="text-align: center;"><button onclick="RemoveEntryFromList('${entry.id}')">&nbsp;X&nbsp;</button></td>
                                    <td style="text-align: center; cursor: pointer;"><i class="fas fa-ellipsis-v"></i></td>`;
  ic++;
}

<div id="container">
  <div id="list-sect">
    <button id="add-custom-item-btn" onClick="addEntryToList('', '', '', '1', '0.00', '0');" style="height: 30px;">
                <i class="fas fa-box-open"></i> Add New Entry
            </button>
  </div>

  <table id="list-table">
    <tr class="list-entry" style="height: 21px;">
      <th width="80px">Code</th>
      <th>Name</th>
      <th>notes</th>
      <th width="60px">Qty</th>
      <th width="76px">Price</th>
      <th width="65px">Disc.(%)</th>
      <th width="76px">Total Price</th>
      <th colspan="2">Remove</th>
    </tr>
  </table>
</div>

原答案：

// Item Counter
var ic = 1;

// Remove an entry 
function RemoveEntryFromList(entry) {
  document.getElementById(entry).remove();
}

// Adds an entry into the "Added Items" list
function addEntryToList(p_code, p_name, p_sn, p_qty, p_price, p_discount, p_url, p_costPrice, p_qtyAvailable) {
  var entry = document.createElement("tr");
  entry.id = ("item-" + String(ic));
  document.getElementById("list-table").tBodies[0].appendChild(entry);
  p_price1 = parseFloat(p_price).toFixed(2);
  p_costPrice1 = parseFloat(p_costPrice).toFixed(2);

  entry.innerHTML = `<td><input value="${p_code}" /></td>
                                    <td><input value="${p_name}" /></td>
                                    <td><input value="${p_sn}" /></td>
                                    <td><input type="text" class="qty" value="${p_qty}" oninput="calculate(this)" /></td>
                                    <td><input type="text" class="price" step="0.01" min="0.00" value="${p_price1}" oninput="calculate(this)" /></td>
                                    <td><input type="text" class="discount" value="${p_discount}" oninput="calculate(this)" /></td>
                                    <td><input type="number" class="net_price" readonly /></td>
                                    <td style="text-align: center;"><button onclick="RemoveEntryFromList('${entry.id}')">&nbsp;X&nbsp;</button></td>
                                    <td style="text-align: center; cursor: pointer;"><i class="fas fa-ellipsis-v"></i></td>`;
  ic++;
}

function calculate(element) {
  var calc_qty = element.parentElement.parentElement.querySelector('.qty').value;
  var calc_price = element.parentElement.parentElement.querySelector('.price').value;
  var discount = element.parentElement.parentElement.querySelector('.discount').value;
  var result = element.parentElement.parentElement.querySelector('.net_price');
  var calc_discount = calc_price * (discount / 100);
  var calc_result = (calc_price - calc_discount) * calc_qty;
  result.value = calc_result;
}

<div id="container">
  <div id="list-sect">
    <button id="add-custom-item-btn" onClick="addEntryToList('', '', '', '1', '0.00', '0');" style="height: 30px;">
                <i class="fas fa-box-open"></i> Add New Entry
            </button>
  </div>

  <table id="list-table">
    <tr class="list-entry" style="height: 21px;">
      <th width="80px">Code</th>
      <th>Name</th>
      <th>notes</th>
      <th width="60px">Qty</th>
      <th width="76px">Price</th>
      <th width="65px">Disc.(%)</th>
      <th width="76px">Total Price</th>
      <th colspan="2">Remove</th>
    </tr>
  </table>
</div>

Answer 2

为了让您的代码使用 document.getElementById("list-table").tBodies[0].appendChild(entry); 工作，您需要将行 (<tr>) 包含在 <tbody> </tbody> 中。

我还会更改您的 entry.innerHTML = (...) 以将每个 td 添加为新的 createElement() 内部条目。