JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr align="right">
<td style="font-size: 11px;"><b>Item 1 - Descontos:</b>
</td>
<td>
<input type="text" name="Desconto11" value="30" class="inputs" size="2" placeholder="%">
</td>
<td>
<input type="text" name="Desconto12" value="5" class="inputs" size="2" placeholder="%">
</td>
<td>
<input type="text" name="Desconto13" value="5" class="inputs" size="2" placeholder="%">
</td>
<td>
<input type="text" name="Desconto14" value="" class="inputs" size="2" placeholder="%">
</td>
<td>
<input type="text" name="Desconto15" value="" class="inputs" size="2" placeholder="%">
</td>
</tr>
<br>
<tr align="right">
<td style="font-size: 11px;"><b>Item 2 - Descontos:</b>
</td>
<td>
<input type="text" name="Desconto21" value="50" class="inputs" size="2" placeholder="%">
</td>
<td>
<input type="text" name="Desconto22" value="5" class="inputs" size="2" placeholder="%">
</td>
<td>
<input type="text" name="Desconto23" value="5" class="inputs" size="2" placeholder="%">
</td>
<td>
<input type="text" name="Desconto24" value="" class="inputs" size="2" placeholder="%">
</td>
<td>
<input type="text" name="Desconto25" value="" class="inputs" size="2" placeholder="%">
</td>
</tr>
</table>
CSS
table {
border-collapse: collapse;
}
.not_valid {
border:1px solid red;
}
JavaScript
var regras = [30, 5, 5, 3, 2];
function validar() {
var linhasFalhadas = $('table tr').each(function () {
var inputsNaoValidados = $(this).find('input').filter(function (i) {
var value = parseInt(this.value, 10) || 0;
return value > regras[i];
});
if (inputsNaoValidados.length) $(this).addClass('not_valid');
else $(this).removeClass('not_valid');;
});
}
validar();