Beginner
Reputation: 191
How to stop the animation scroll of jquery?
function valueE(e) {
var newValue = e.target.value;
var $radio = $(e.target);
if ($radio.is('.Fr')) {
$radio.closest('tr').find('.numFr').val(newValue);
} else {
$radio.closest('tr').find('.numIr').val(newValue);
}
}
$(document).ready(function() {
$('#showme').click(function() {
validateNresult();
})
$('.allrb').change(valueE);
});
function validateNresult() {
$.each($("tbody tr"), function(i, e)
{
var hasInvalidInputs = $(this).find(".numFr, .numIr").filter(function() {
return $.trim(this.value).length === 0;
}).length > 0;
if (hasInvalidInputs)
{
$(this).addClass("invalid");
$('html, body').animate(
{
scrollTop: ($(this).offset().top)
},
1000
);
}
else {
$(this).removeClass("invalid");
}
});
}input[type=number] {
width: 25px;
text-align: center;
}
.invalid {
outline: 1px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-responsive" id="tab">
<tr id="alertr1" name="v">
<td width="200px" id="text">content 1</td>
<td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr1" class="numFr" id="numFr1" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr1" class="numIr" id="numIr1" disabled></td>
</tr>
<tr id="alertr2" name="v">
<td width="200px" id="text">content 2</td>
<td width="40px"><label><input type="radio" name="Fr2" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr2" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr2" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr2" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr2" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr2" class="numFr" id="numFr2" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr2" class="numIr" id="numIr2" disabled></td>
</tr>
<tr id="alertr3" name="v">
<td width="200px" id="text">content 3</td>
<td width="40px"><label><input type="radio" name="Fr3" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr3" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr3" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr3" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr3" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir3" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr3" class="numFr" id="numFr3" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr3" class="numIr" id="numIr3" disabled></td>
</tr>
<tr id="alertr4" name="v">
<td width="200px" id="text">content 4</td>
<td width="40px"><label><input type="radio" name="Fr4" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr4" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr4" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr4" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr4" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir4 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir4" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir4 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir4 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir4 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr4" class="numFr" id="numFr4" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr4" class="numIr" id="numIr4" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
</table>
<button class="btn btn-primary" id="showme" type="button">View Result</button>
<p style="float:right;position:absolute;margin-left:700px;margin-top:10px;" id="alertmessage"></p>If I click to button, the answer that are empty will be highlighted and scroll to the row. But I don't want it scroll row by row,I just want it jump to the first error and no need to scroll row by row. I had try to using the
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
page.stop();
});
but I seem like not work for me. It can be scroll row by row too, but I want it to stop when user scroll down/up their mouse.Thanks.
Upvotes: 0
Views: 23
Answers (1)
Prashant Shirke
Reputation: 1423
You need to scroll to the first invalid row. As its a loop, need to store the first invalid row.
Check the below code. Have changed to store the index of the first invalid row and then scroll to it after loop completes.
NOTE : 20 is subtracted from the top as a buffer, adjust or remove it as per requirement.
Hope this helps!
function valueE(e) {
var newValue = e.target.value;
var $radio = $(e.target);
if ($radio.is('.Fr')) {
$radio.closest('tr').find('.numFr').val(newValue);
} else {
$radio.closest('tr').find('.numIr').val(newValue);
}
}
$(document).ready(function() {
$('#showme').click(function() {
validateNresult();
})
$('.allrb').change(valueE);
});
function validateNresult() {
var firstInvalidRowIndex = 0;
$.each($("tbody tr"), function(i, e) {
var hasInvalidInputs = $(this).find(".numFr, .numIr").filter(function() {
return $.trim(this.value).length === 0;
}).length > 0;
if (hasInvalidInputs) {
$(this).addClass("invalid");
if (firstInvalidRowIndex <= 0) {
firstInvalidRowIndex = i + 1;
}
} else {
$(this).removeClass("invalid");
}
});
if (firstInvalidRowIndex > 0) {
$('html, body').animate({
scrollTop: ($("tbody tr:nth-child(" + firstInvalidRowIndex + ")").offset().top - 20)
}, 1000);
}
}input[type=number] {
width: 25px;
text-align: center;
}
.invalid {
outline: 1px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-responsive" id="tab">
<tr id="alertr1" name="v">
<td width="200px" id="text">content 1</td>
<td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr1" class="numFr" id="numFr1" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr1" class="numIr" id="numIr1" disabled></td>
</tr>
<tr id="alertr2" name="v">
<td width="200px" id="text">content 2</td>
<td width="40px"><label><input type="radio" name="Fr2" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr2" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr2" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr2" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr2" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr2" class="numFr" id="numFr2" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr2" class="numIr" id="numIr2" disabled></td>
</tr>
<tr id="alertr3" name="v">
<td width="200px" id="text">content 3</td>
<td width="40px"><label><input type="radio" name="Fr3" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr3" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr3" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr3" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr3" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir3" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr3" class="numFr" id="numFr3" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr3" class="numIr" id="numIr3" disabled></td>
</tr>
<tr id="alertr4" name="v">
<td width="200px" id="text">content 4</td>
<td width="40px"><label><input type="radio" name="Fr4" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr4" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr4" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr4" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr4" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir4 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir4" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir4 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir4 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir4 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr4" class="numFr" id="numFr4" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr4" class="numIr" id="numIr4" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
<tr id="alertr5" name="v">
<td width="200px" id="text">content 5</td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="0"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="1"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="2"></label></td>
<td width="40px"><label><input type="radio" name="Fr5" class="allrb Fr" value="3"></label></td>
<td width="30px"><label><input type="radio" name="Fr5" class="allrb Fr" value="4"></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="0" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir5" class="allrb" value="1" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="2" ></label></td>
<td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="3" ></label></td>
<td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir5 Ir" class="allrb" value="4" ></label></td>
<td width="30px"><input type="number" name="numFr5" class="numFr" id="numFr5" disabled></td>
<td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr5" class="numIr" id="numIr5" disabled></td>
</tr>
</table>
<button class="btn btn-primary" id="showme" type="button">View Result</button>
<p style="float:right;position:absolute;margin-left:700px;margin-top:10px;" id="alertmessage"></p>Upvotes: 2
Related Questions
- How can I stop a CSS animation on scroll?
- Stop animation at certain position on page [jQuery]
- how to block the scrollTo animation on click
- Stopping the scrolling animation once it has been closed
- Prevent scroll event in jQuery
- How to disable scrolling until animation is complete?
- Stop page scroll when using slideUp/slideDown Jquery
- Jquery scroll-to not scrolling
- stop window scroll animation
- jquery prevent normal scroll and animate