Question

<tr>
    <td><input type="text" name="description" required /></td>
    <td><input type="text" name="quantity" id="quantity" onkeyup="sum();" required /></td>
    <td><input type="text" name="price" id="price" onkeyup="sum();" required /></td>
    <td><input type="text" name="lineTotal" id="lineTotal" readonly /></td>
    <td><input type="button" onclick="addLine();" value="+" /></td>
</tr>

以下是我的javascript代码

<script type="text/javascript">
function addLine() {
      var tabLines = document.getElementById("tabLines");
      var tabLinesRow = tabLines.insertRow(tabLines.rows.length-1);
      var col1html = "<input type='text' name='description' />";
      var col2html = "<input type='text' name='quantity' id='quantity' onkeyup='sum();' />";
      var col3html = "<input type='text' name='price' id='price' onkeyup='sum();' />";
      var col4html = "<input type='text' name='lineTotal' id='lineTotal' readonly />";
      var col5html = "<input type='button' onclick='removeLine(this);' value='-'>";


      var col1 = tabLinesRow.insertCell(0); col1.innerHTML=col1html;
      var col2 = tabLinesRow.insertCell(1); col2.innerHTML=col2html;
      var col3 = tabLinesRow.insertCell(2); col3.innerHTML=col3html;
      var col4 = tabLinesRow.insertCell(3); col4.innerHTML=col4html;
      var col5 = tabLinesRow.insertCell(4); col5.innerHTML=col5html;
    }

    function removeLine(lineItem) {
      var row = lineItem.parentNode.parentNode;
      row.parentNode.removeChild(row);
    }

    function sum() {
        var q = document.getElementById('quantity').value;
        var p = document.getElementById('price').value;
        var result = parseInt(q) * parseInt(p);

        if(q=="" || p==""){
            document.getElementById('lineTotal').value = 0;
        }

        if (!isNaN(result)) {
            document.getElementById('lineTotal').value = result;
        } 
    }

</script>

我想在这里做一些计算。当我计算默认单行时，它确实计算，当我按下添加按钮并且我在第二行中进行一些计算时它可以工作，但是当我添加更多行时它不会计算。我不知道如何解决它。请帮助我作为javascript的新手

Answer 1

看起来您的问题是您正在复制ID的

尝试为添加的每行添加ID的索引

Answer 2

ID必须是独一无二的。如果您需要引用相同的元素，请改用class。

Answer 3

这就是你的问题。 HTML元素中的id属性在整个页面中应该是唯一的。但是，您可以尝试为行中的每个重复元素添加索引作为后缀，例如“quantity1”，“price1”等。

我还建议您在浏览器中尝试开发人员工具，特别是控制台和调试器。在那里，您可以逐步（调试器）或按需（控制台）运行您的JavaScript代码，以检查您在哪里有错误。

javascript不计算具有相同ID的值

3 个答案: