0

我动态生成了一个带有单个文本元素表单和一个数据表的 php 页面。表格的每一行都有一个条形码作为名称 ()。当我扫描表单中的每个条形码时，我想使用 jquery 更改行颜色。

php页面简化：

<form id="checkinProcess" class="mainForm" method="post" action="">
  <label>Barcode:</label>
  <input type="text" class="required" name="barocde" id="processBarcode"/>
  <input type="submit" value="submit" class="blueBtn" />
</form>

<table class="display" id="barcodeTable">
            <thead>
                <tr>
                    <th>Barcode</th>
                    <th>Amount</th>
                    <th>Code</th>
                </tr>
            </thead>
            <tbody>
                <tr id="B12345" class="odd">
                    <td>B12345</td>
                    <td>20.3</td>
                    <td>External</td>
                </tr>
                <tr id="B23456" class="even">
                    <td>B23456</td>
                    <td>19.6</td>
                    <td>Internal</td>
                </tr>
                <tr id="B34567" class="odd">
                    <td>B34567</td>
                    <td>22.0</td>
                    <td>Internal</td>
                </tr>
            </tbody>
        </table>

表CSS：

tr.odd { background-color: #F9F9F9; }
tr.even { background-color: white; }
tr.curChecked {background-color: #33CC33; }

jQuery尝试：

$('#checkinProcess').submit(function(e){
    e.preventDefault();
    $("tr.processBarcode").removeClass("odd" "even").addClass("curChecked");
});

如何将表单中扫描的条形码传递给我的 JQuery 以识别我想要更改的 tr 标签的类？我什至可以这样做吗？

谢谢

4

1 回答 1

0 
<script>tr.curChecked {background-color: #33CC33; } </script>

<form id="checkinProcess" class="mainForm" method="post" action="">
  <label>Barcode:</label>
  <input type="text" class="required" name="barocode" id="processBarcodes" />
  <input type="submit" value="submit" class="blueBtn" id="submitBtn" />
</form>

<div class="table">
  <table class="display" id="testTable">
    <thead class="tableheader">
      <tr><th>No</th><th>Name</th><th>Age</th><th>Salary</th></tr>
    </thead>
    <tbody id="testBody">
      <tr id="B000506" ><td>1</td><td>Abe</td><td>28</td><td>$100K</td></tr>
      <tr id="B000501" ><td>2</td><td>Jimmy</td><td>29</td><td>$90K</td></tr>
      <tr id="B000506" ><td>3</td><td>Dude</td><td>18</td><td>$50K</td></tr>
      <tr id="B000506" ><td>4</td><td>Boyee</td><td>28</td><td>$40K</td></tr>
    </tbody>
  </table>

<script>
  $(document).ready(function() {
    $("#submitBtn").on("click", highlight);

    function highlight(evt) {
      evt.preventDefault();
      var scanbc = $("#processBarcodes").val();
      $("#" + scanbc).addClass("curChecked");
      $("#processBarcodes").val('');
      $("#processBarcodes").focus();
</script>

工作。

于 2012-12-14T23:41:53.340 回答