Javascript 使用jQuery动态添加行

我有一个与条形码扫描仪集成的应用程序，如下所示：

我用这段代码动态地排了一行：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="container" align="top" style="margin-top: 0px;">
    <h1 align="center">
        Barcode: <br><input type="text" id="myHeader" value="5555">
    </h1>
    <table id="myTable" class=" table order-list">
      <thead>
        <tr>
          <td>Barcode</td>
          <td>Item</td>
        </tr>
      </thead>
      <tbody>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="7" style="text-align: left;">
            <div align="right">
              <p style="color: black;margin-right: 90px;">9.999.999</p>
            </div>
            <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" style="border-color: black;" />
          </td>
        </tr>
        <tr>
        </tr>
      </tfoot>
    </table>
</div>

条形码：

条形码
项目
9.999.999

下面是我用script标记包装的代码：

<script >
    $(document).ready(function() {
        var counter = 0;

        $("#addrow").on("click", function() {
            var newRow = $("<tr>");
            var cols = "";

            cols += '<td><input type="text" disabled value="123123123" class="form-control" name="name' + counter + '"/></td>';
            cols += '<td><input type="text" disabled value="Sekop" class="form-control" name="mail' + counter + '"/></td>';

            cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
            newRow.append(cols);
            $("table.order-list").append(newRow);
            counter++;
        });

        $("table.order-list").on("click", ".ibtnDel", function(event) {
            $(this).closest("tr").remove();
            counter -= 1
        });
    });

function calculateRow(row) {
    var price = +row.find('input[name^="price"]').val();
}

function calculateGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="price"]').each(function() {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").text(grandTotal.toFixed(2));
} </script>

$（文档）.ready（函数（）{
var计数器=0；
$（“#添加行”）。在（“单击”，函数（）{
var newRow=$（“”）；
var cols=“”；
cols+=''；
cols+=''；
cols+=''；
newRow.append（cols）；
$（“table.order list”）.append（newRow）；
计数器++；
});
$（“table.order list”）。在（“click”、“.ibtnDel”上，函数（事件）{
$（this）.tr.remove（）；
计数器-=1
});
});
函数计算器OW（行）{
var price=+row.find（'input[name^=“price”]”）。val（）；
}
函数calculateGrandTotal（）{
var-grandTotal=0；
$（“table.order list”）.find（'input[name^=“price”]”）。每个（函数（）{
grandTotal++$（this.val（）；
});
$（“#grandtotal”）.text（grandtotal.toFixed（2））；
} 

但是上面的代码只是在我单击添加行按钮时添加行

我现在想要的是，当我用条形码扫描仪扫描条形码时，自动添加的行将跟随扫描的条形码结果。 在这种情况下，它将是：“当标题上的条形码上的值发生更改时（

条形码：123123123

），当我单击添加行按钮时，结果相同

因此，请参考任何方法、教程或示例代码如何做到这一点，我们将不胜感激：）

有关其他信息：此应用程序用于商店上的出纳应用程序，如出纳扫描产品时，结果自动显示在应用程序上。我使用Python Flask开发它

$('#myTable tbody').append(newRow)

我认为您的jQuery选择器有问题

---

尝试上面显示的代码-希望它对您有用。

您必须倾听元素中所做的更改。您可以尝试使用

$（文档）.ready（函数（）{
var计数器=0；
$（“#添加行”）。在（“单击”，函数（）{
var newRow=$（“”）；
var cols=“”；
cols+=''；
cols+=''；
cols+=''；
newRow.append（cols）；
$（“table.order list”）.append（newRow）；
计数器++；
});
$（“table.order list”）。在（“click”、“.ibtnDel”上，函数（事件）{
$（this）.tr.remove（）；
计数器-=1
});
});
函数计算器OW（行）{
var price=+row.find（'input[name^=“price”]”）。val（）；
}
函数calculateGrandTotal（）{
var-grandTotal=0；
$（“table.order list”）.find（'input[name^=“price”]”）。每个（函数（）{
grandTotal++$（this.val（）；
});
$（“#grandtotal”）.text（grandtotal.toFixed（2））；
}
//听header元素中的更改并添加行
var target=document.querySelector（“#myHeader”）；
setTimeout（函数（）{
target.textContent=“新条形码：XXXXXXXXX”；//2秒后更改文本
}, 2000)
var观察者=新的突变观察者（功能（突变）{
突变。forEach（功能（突变）{
$（“#addrow”）.trigger（“click”）；//如果标题文本发生更改，则触发click事件以添加行
});
});
变量配置={
属性：正确，
儿童名单：是的，
characterData：true
};
observer.observe（目标，配置）；
//否则
observer.disconnect（）；
观察者。观察（目标，配置）；

条形码：123123
条形码
项目
9.999.999

启动条形码扫描仪时，首先检查事件。启动时，您需要触发

添加行

按钮，以便它在您的表格中添加新行。之后，您可以找到表格的最后一行，然后可以替换

条形码

和

项目

的值。希望它能帮助您完成方法。您好，谢谢对于答案，但它只是第一次工作（刷新浏览器后），如果我添加了新的条形码会怎么样？@GofyandKitty，通过看到更新的问题，您似乎不需要突变观察者。您可以简单地触发元素的聚焦时点击事件（

blur

）事件。我已经更新了答案，请检查：）