Question

Here’s a Fiddle for what I’m about to discuss.

I have three input boxes and I want to make them so that as the user types into any one of them, the others will populate with some text. It should be set so that if the user is typing in the first cell, the two cells to the right are populated, or if the user is typing in the last cell in the row, the first two cells are populated.

The code I have so far is in the Fiddle. I’ve tried .next() about a million times and I can’t get it to work.

HTML:

<table>
    <tr>
        <td><input type="text" /></td>
        <td><input type="text" /></td>
        <td><input type="text" /></td>
    </tr>
</table>​

JS:

$('input').focus(function() {
    $(this).keyup(function() {
        var tmp = $(this).val();
        $(this).next('input').val("asdf");
    });
});​

Answer 1

$('input').on('keyup', function() {
    $(this).closest('td').siblings('td').find('input').val(this.value);
});

FIDDLE

EDIT:

To exclude the first one:

$('input:gt(0)').on('keyup', function() {
    $(this).closest('td').siblings('td').not(':first').find('input').val(this.value);
});

FIDDLE