JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<table id="Table-02" class="Table" style="width:1075px;" bordercolor="#000000" border="1" cellspacing="0">
<thead>
<tr id="DAU207-header" style="height:040px">
<th align="center"><div style="width:065px"> Num </div></th>
<th align="center"><div style="width:285px"> Type </div></th>
<th align="center"><div style="width:285px"> Label </div></th>
<th align="center"><div style="width:105px"> Unit </div></th>
<th align="center"><div style="width:120px"> Value </div></th>
<th align="center"><div style="width:070px"> Scale </div></th>
<th align="center"><div style="width:070px"> Source </div></th></tr>
</thead>
<tbody>
<tr id="DAU207-0">
<td align="center">0</td>
<td align="center">Text</td>
<td align="center">Label 1</td>
<td align="center">Miles</td>
<td align="center">2.740000</td>
<td align="center"><input type="text" name="Scale" class="scaleValidation" value="1.000" style="width:80%;"></td>
<td align="center"><input type="text" name="Source" class="sourceValidation" value="0" style="width:80%;"></td>
</tr>
<tr id="DAU207-1">
<td align="center">1</td>
<td align="center">Text</td>
<td align="center">Label 2</td>
<td align="center">Kilometres</td>
<td align="center">27.320000</td>
<td align="center"><input type="text" name="Scale" class="scaleValidation" value="1.000" style="width:80%;"></td>
<td align="center"><input type="text" name="Source" class="sourceValidation" value="1" style="width:80%;"></td>
</tr>
<tr id="DAU207-2">
<td align="center">2</td>
<td align="center">Text</td>
<td align="center">Label 3</td>
<td align="center">Miles</td>
<td align="center">272.799988</td>
<td align="center"><input type="text" name="Scale" class="scaleValidation" value="1.000" style="width:80%;"></td>
<td align="center"><input type="text" name="Source" class="sourceValidation" value="2" style="width:80%;"></td>
</tr>
</tbody>
</table>
</form>
<p><input type="SUBMIT" name="ProcessNow" id="ProcessNow" value="Process Now"...
JavaScript
$(document).ready(function() {
$('#ProcessNow').click(function(e) {
var isValid = true;
$('input[type="text"]').each(function() {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
});
});