jQuery update table row depending on how user inputs data

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.

maxedison · Accepted Answer · 2011-09-19 19:16:19Z

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');
        }
    });
});

answered Sep 19, 2011 at 19:16

maxedison

17.6k15 gold badges72 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Allen Liu Over a year ago

No. I didn't really know where to begin with the one because of the multiple elements that I needed to keep track of. I had some code I did a couple of months ago but it was clunky and didn't really work. This helps. Thanks!

Allen Liu Over a year ago

I have a question. I have this other feature that helps "paste" in data where I automatically set the values via .val(). This does not trigger the .keyup() function. I tried using .change() but that did not work. Do you have any suggestions. Thanks!

maxedison Over a year ago

For that, I'd put all the code inside the keyup event I wrote into a separate function. Then, just call that function inside the keyup event, as well as right after doing the paste. Something like this: jsfiddle.net/ebiewener/Zs5sb/2

Collectives™ on Stack Overflow

jQuery update table row depending on how user inputs data

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related