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 に答える