CODEWITHSUNDEEP
javascriptjqueryhtmlcssinput
PHP9274745382389
PHP9274745382389

Reputation: 169

JQuery Change TR background Colour depending on currently selected Text Input

I am trying to make a system that changes the background colour of the TR element which the current input box is being typed into / Selected . I currently have it so you change to the next text box when a letter is entered into the current text box.

<html>

<body>
    <table>
        <tr>
            <td>
                <input type='text' id='txt1' maxlength='1' />
            </td>
        </tr>
        <tr>
            <td>
                <input type='text' id='txt2' maxlength='1[' />
            </td>
        </tr>
    </table>
    <script src="Scouts/resources/plugins/jquery.js"></script>
    <script>
        $('#txt1').keyup(function () {
            if (this.value.length == $(this).attr('maxlength')) {
                $('#txt2').focus();
            }
        });
    </script>
</body>

</html>

I want the parent TR element of the focused input to be a different colour to the other TR elements. I want this to change depending on the focused input.

Thanks in advance and sorry for my bad explenation!

Upvotes: 1

Views: 4345

Answers (1)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

Try

$('tr input').focus(function () {
    var $tr = $(this).closest('tr'); //get tr
    $tr.css('background-color', 'red'); //change background color 
    $tr.siblings().css('background-color', 'OldColor'); //set sibling tr's background color to be old color
}).blur(function () {
    var $tr = $(this).closest('tr');//get tr
    $tr.css('background-color', 'OldColor');//set tr's background color to be old color
});

Upvotes: 2

Related Questions