Question

I dynamically generated a php page with a single text element form and a table of data. Each row of the table has a barcode as the name (). As I scan each barcode in the form, I’d like to change the row color using jquery.

Php page simplified:

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

Table Css:

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

jQuery attempt:

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

How do I pass the barcode scanned in the form to my JQuery to identify which tr tag’s class I want changed? Can I even do that?

Thanks

Answer 1

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

Worked.