代码之家 › 专栏 › 技术社区 › Tri

使用Jquery动态添加行

barcode-scanner barcode html jquery javascript

0

Tri · 技术社区 · 6 年前

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

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

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

下面是我用脚本标签包装的代码:

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

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

我现在想要的是,当我用条形码扫描仪扫描条形码时,自动添加的行将跟随扫描的条形码结果。在这种情况下,它将是:“当标题上的条形码上的值发生变化时。”( <h1 align="center">Barcode: 123123123</h1> ,当我点击 添加行 按钮

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

有关更多信息: 这个应用程序的目的是为商店的收银员应用程序,比如当收银员扫描产品时,结果会自动出现在应用程序上。我使用Python Flask开发它。

2 回复 | 直到 6 年前

1

Mamun 6 年前

你必须倾听元素中的变化。你可以试试 MutationObserver

$(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));
}

// Listen to the changes in the header element and add row
var target = document.querySelector('#myHeader');

setTimeout(function() {
  target.textContent = "New Barcode: XXXXXXXXX"; // change text after 2 seconds
}, 2000)

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    $("#addrow").trigger("click"); // trigger the click event to add row if the header text is changed
  });
});

var config = {
  attributes: true,
  childList: true,
  characterData: true
};

observer.observe(target, config);

// otherwise
observer.disconnect();
observer.observe(target, config);

<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" id="myHeader">Barcode: 123123123</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>

更新: 更新后的问题表示您可以触发条形码输入元素的点击模糊事件:

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

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";
    var barcode = $("#myHeader").val().trim();// take the current barcode value
    cols += '<td><input type="text" disabled value= '+ barcode +'  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));
}

// Add new row by triggering the click event on focus out
var target = document.querySelector('#myHeader');
target.addEventListener('blur', function(){
  $("#addrow").trigger("click");
});

<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;">
    Barcode: <br><input type="text" id="myHeader" value="5555">
    <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>

2

1

marc_s MisterSmith 6 年前

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

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

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