I am facing a requirement to dynamically change the color of rows based on the dropdown onchange value. The rows are structured in divisions, which were previously tables. There are two main divisions with rows that need to be updated based on dropdown selection.
Specifically, when the value in the dropdown within the first division is changed, I want to update the color of all rows in that division. Additionally, I also need to update the color of rows in the second main division. While this could easily be achieved with tables, working with divisions has proven to be challenging and I am uncertain about its feasibility. Below, you will find my code structure along with the jQuery implementation used for changing colors.
$('#bodyLeft tr').bind('click', function(e) {
var bodyLeftTable = $("#bodyLeft tr").index(this);
var vehicleClassVal = $("#bodyLeft tr:nth-child(" + bodyLeftTable + ")").find('.vehicleClass').val();
if (scheduleStatusVal == 'Volvo') {
$("#bodyLeft tr:nth-child(" + bodyLeftTable + ")").addClass("runningVehicleClass");
$("#bodyRight tr:nth-child(" + bodyLeftTable + ")").addClass("runningVehicleClass");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--First Division-->
<div id="bodyLeft">
<div class="divTableRow">
<div class="divTableCell divWidth">
<select class="vehicleClass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="divTableCell divWidth">
<input type="text" name="address">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="pass">
</div>
</div>
<div class="divTableRow">
<div class="divTableCell divWidth">
<select class="vehicleClass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="divTableCell divWidth">
<input type="text" name="address">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="pass">
</div>
</div>
</div>
<!--Second Division -->
<div id="bodyRight">
<div class="divTableRow">
<div class="divTableCell width20">
<input type="text" name="parts">
</div>
<div class="divTableCell width85">
<input type="text" name="ischecked">
</div>
<div class="divTableCell width85" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="validity">
</div>
</div>
<div class="divTableRow">
<div class="divTableCell divWidth">
<input type="text" name="parts">
</div>
<div class="divTableCell divWidth">
<input type="text" name="ischecked">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="validity">
</div>
</div>
</div>