JSFiddle - React, Tailwind, and code Playground
HTML
Text 1 :
<input type="text" value="" />
<br/>Text 2 :
<input type="text" value="" />
<br/>
<table id="myTable">
<tr>
<th></th>
<th></th>
<th>Cannot be null</th>
<th>Can be null</th>
</tr>
<tr>
<td>
<input type="button" value="+" />
</td>
<td>
<input type="button" value="-" />
</td>
<td>
<input type="text" value="orange" />
<input type="button" value="?" />
</td>
<td>
<input type="text" value="12-12-2015" />
</td>
<td>
<input type="hidden" value="1" />
</td>
<td>
<input type="hidden" value="add" />
</td>
</tr>
<tr>
<td>
<input type="button" value="+" />
</td>
<td>
<input type="button" value="-" />
</td>
<td>
<input type="text" value="orange" />
<input type="button" value="?" />
</td>
<td>
<input type="text" value="12-12-2015" />
</td>
<td>
<input type="hidden" value="1" />
</td>
<td>
<input type="hidden" value="add" />
</td>
</tr>
</table>
<input type="button" id="btnSave" />
JavaScript
$("#btnSave").click(function (event) {
var flag = false;
var emptyBoxes;
var $rows = $('#myTable tr:not(:hidden)');
$rows.each(
function () {
emptyBoxes = $('#myTable tr input[value != add]:text').filter(function () {
return this.value == "";
});
if (emptyBoxes.length != 0) {
flag = true;
}
});
if (flag) {
alert("this cannot be empty");
emptyBoxes.eq(0).focus();
} else {
alert("done");
}
});