navigation of arrow keys in form like excel

navigation of arrow keys in form like excel

my code work but my problem is that the color in the table will be erased when the focus leaves it row or column someone any idea?

$(document).ready(function(){
p="";
m="";
f="";
 var computeValues = function(){
            var id = $(this).attr("id").replace("prelim_", "").replace("midterm_", "").replace("final_", "");
  p = $("#prelim_" + id).val();
            m = $("#midterm_" + id).val();
            f = $("#final_" + id).val();
if (p =='130' || m=='130' || f=='130')
{
$("#row_" + id).css('background-color','pink');
}
else
{
$("#row_" + id).css('background-color','transparent');
}
Compute(p, m, f, id);
        };
        
        $("input").bind('keyup', computeValues);
        
        function Compute(p, m, f, studno) {
            var average;
            average = parseFloat(p * 0.3) + parseFloat(m * 0.3) + parseFloat(f * 0.4);
if (!$("#disable_" + studno).is(':checked')) { 
$("#average_" + studno).val(average.toFixed());   
} else {
}
            
        }
$(".disable").change(function() {
var id = $(this).attr("id").replace("disable_", "");
            if ($(this).is(':checked')) {
$('#average_' + id).removeAttr("readonly");
 
}
else 
{
             
}
        });

$("input").keyup(function(e){
  if(e.which==39)
   $(this).closest('td').next().find("input").focus();
  else if(e.which==37)
   $(this).closest('td').prev().find("input").focus();
  else if(e.which==40)
   $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find("input").focus();
  else if(e.which==38)
   $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find("input").focus();
 });
       
    });