jqueryのアニメーションスクロールを停止するには？

Question

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>

ボタンに私をクリックすると、空になっている答えは強調表示され、行にスクロールされます。しかし、私はそれを行ごとにスクロールする必要はありません、私はちょうどそれが最初のエラーにジャンプし、行ごとにスクロールする必要はありません。私はその使用しようとしていた

page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){ 
     page.stop(); 
    }); 

しかし、私は私のために働いていないようです。行ごとにスクロールすることもできますが、ユーザーがマウスをスクロール/スクロールすると停止します。

Answer 1

最初の無効な行にスクロールする必要があります。そのループとして、最初の無効な行を格納する必要があります。

以下のコードを確認してください。最初の無効な行のインデックスを格納し、ループが完了した後にスクロールするように変更しました。

注：バッファーとして上から20を引いて、必要に応じて調整または除去します。

希望すると便利です。

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>