Bind form entry to jquery script to .removeclass .addclass - php

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.