Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
           $("#kelija1").css("background-color", "#FF0000" );
           $("#kelija2").css("background-color", "#00FF00" );
           $("#kelija3").css("background-color", "#0000FF" );


            document.addEventListener("keyup", function(event) {
                console.log(event.which);
                if(parseInt(event.which) == 38)
                {
                    $("#kelija1").css("background-color", randomboja() );
                    $("#kelija2").css("background-color", randomboja() );
                    $("#kelija3").css("background-color", randomboja() );
                }
                else if(parseInt(event.which) == 37){
                    var prva = document.getElementById("kelija1").style.backgroundColor;
                    var vtora = document.getElementById("kelija2").style.backgroundColor;
                    var treta = document.getElementById("kelija3").style.backgroundColor;

                    $("#kelija1").css("background-color", vtora);
                    $("#kelija2").css("background-color", treta);
                    $("#kelija3").css("background-color", prva);
                }
            });


        });
        function randomboja() {
            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }


    </script>
</head>
<body>

<table style="width:300px;height:100px">
    <tr>
        <td id="kelija1" >
        </td>
        <td id="kelija2">
        </td>
        <td id="kelija3">
        </td>
    </tr>
</table>

</body>
</html>