Count & Highlight Table Row Elements Dynamically - php

Question

I want to be able to do two things. The first, is look at all "selected" items of a certain value. Say I have a, b, c ; I want to look for all items selected as "c" and highlight that table row as a different color. In addition, upon opening the form, I want the items counted, and be able to display a message div at the top of the screen showing those highlighted items. What is the best practical way of doing this? This is my original code :
//Start loop of items
<?php foreach ( $data['Detail'] as $key=>$item){?>
<tr id="tr_<?php echo $key+1?>">
<td>
<select value="<?php echo $location; ?>" name="[<?php echo $key;?>][location]" id="location_<?php echo $key+1?>" class="form-control>
<option value="Selection1" <?= ($item['location']) == 'Selection1' ? 'selected' : '' ?>>Selection1</option>
<option value="Selection2" <?= ($item['location']) == 'Selection2' ? 'selected' : '' ?>>Selection2</option>
<option value="Selection3" <?= ($item['location']) == 'Selection3' ? 'selected' : '' ?>>Selection3</option>
</select>
</td>
</tr>
// Segment here to count? Example :
// $location_count = 0; If $location = 'c' then $location_count++;
<?php } ?>
Sample Div Code :
<div>
<p>You have <?php echo $location_count?> Locations that need reviewed</p>
</div>
Image Sample of Working Code :

Answer 1

the theory is:
loop through the table's select elements
check each select's value and update the row style
when a select changes, do the same to the current row.
count the rows with the highlight
append the row count to the div
You can see the theory in practice with the code/link below.
The code is purposefully simplistic for demonstration and could be improved for performance/terseness. However it's not bad code :)
$(function() {
/* function to run for select boxes in table */
function rowState( $select ) {
var selected = false;
/* set boolean for selected */
if ( $select.val() === "c" ) {
selected = true;
}
/* apply css class to the row if selected */
$select.closest("tr").toggleClass("c", selected);
/* count rows */
var n = $( "table tr.c" ).length;
/* change the html element's text to the count */
$( ".snippet span" ).text( n );
}
$("table select").each(function() {
/* on page load, set selected states */
rowState($(this));
}).on("change", function() {
/* on state change, set selected states */
rowState($(this));
});
});
table {
width: 100%;
}
tr td {
background: #eee;
}
tr.c td {
background: #cfc
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="snippet">
Please review <span>x</span> items
</div>
<table>
<tr>
<td>
<select>
<option value="a" selected>a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c" selected>c</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option value="a">a</option>
<option value="b" selected>b</option>
<option value="c">c</option>
</select>
</td>
</tr>
</table>