Question

I have a table with rows of 2 input text boxes in each row:

<table>
    <tr><td><input id="1_1" type="text"></td><td><input id="1_2" type="text"></td></tr>
    <tr><td><input id="2_1" type="text"></td><td><input id="2_2" type="text"></td></tr>
    <tr><td><input id="3_1" type="text"></td><td><input id="3_2" type="text"></td></tr>
</table>

If the user has just one of the input texts filled in, I would like to append a certain icon in front of the row. If the user has both inputs filled in, I would like to append a different type of icon. All of this occurs on a per row basis. How would I go about accomplishing this?

Any suggestions would be greatly appreciated.

Answer 1

Have you tried anything? Seems like some pretty straightforward jQuery to me.

Here’s a working example where I’ve added an additional <td> prior to the input fields and inserted a <div class="icon"></div> inside of it as a placeholder for the icon you want.

The jQuery for changing it is the following:

$(function(){
    $('input').keyup(function(){
        var row = $(this).parent().parent();
        var inputsChanged = 0;
        row.find('input').each(function(){
            if($(this).val() !== '') inputsChanged++;
        });
        if(inputsChanged === 1){
            row.find('.icon').css('background-color','red');
        }else if(inputsChanged === 2){
            row.find('.icon').css('background-color','green');
        }else if(inputsChanged === 0){
            row.find('.icon').css('background','none');
        }
    });
});