as explain on solution for the issue: Using arrows-keys to navigate

/

I have same table with some text input, and I got some problem to select text in input box in tables cells during navigating between cells.

can any one help me to solve it? navigation works fine but not select text in input box!!! and also i want to navigate only between cells that have input-box, not all them

Notes: I just want to navigate between cells that have text input-box.

table codes:

    <table border="1" id="navigate">
    <tbody>
        <tr>
            <td><input type="text" id="1" class="input"></td>
            <td></td>
            <td><input type="text" id="3" class="input"></td>
            <td></td>
            <td><input type="text" id="5" class="input"></td>
        </tr>
        <tr>
            <td><input type="text" id="6" class="input"></td>
            <td><input type="text" id="7" class="input"></td>
            <td></td>
            <td><input type="text" id="9" class="input"></td>
            <td><input type="text" id="10" class="input"></td>
        </tr>
        <tr>
            <td><input type="text" id="11" class="input"></td>
            <td><input type="text" id="12" class="input"></td>
            <td></td>
            <td><input type="text" id="14" class="input"></td>
            <td><input type="text" id="15" class="input"></td>
        </tr>
    </tbody>
</table>

and this is my own demon

as explain on solution for the issue: Using arrows-keys to navigate

http://jsfiddle/BdVB9/

I have same table with some text input, and I got some problem to select text in input box in tables cells during navigating between cells.

can any one help me to solve it? navigation works fine but not select text in input box!!! and also i want to navigate only between cells that have input-box, not all them

Notes: I just want to navigate between cells that have text input-box.

table codes:

    <table border="1" id="navigate">
    <tbody>
        <tr>
            <td><input type="text" id="1" class="input"></td>
            <td></td>
            <td><input type="text" id="3" class="input"></td>
            <td></td>
            <td><input type="text" id="5" class="input"></td>
        </tr>
        <tr>
            <td><input type="text" id="6" class="input"></td>
            <td><input type="text" id="7" class="input"></td>
            <td></td>
            <td><input type="text" id="9" class="input"></td>
            <td><input type="text" id="10" class="input"></td>
        </tr>
        <tr>
            <td><input type="text" id="11" class="input"></td>
            <td><input type="text" id="12" class="input"></td>
            <td></td>
            <td><input type="text" id="14" class="input"></td>
            <td><input type="text" id="15" class="input"></td>
        </tr>
    </tbody>
</table>

and this is my own demon

• javascript
• jquery

• Does this example work for you? It basically adds inputs to each cell and sets the focus to input fields. Because of eventPropagation a click to a input box, will trigger the previous existing event of clicking a cell, too. jsfiddle/BdVB9/347 – Armin Commented Nov 22, 2012 at 10:31
• i want to change the input text but can not do that – Osiris Commented Nov 22, 2012 at 10:37
• What do you mean with "change the input text"? My example just focuses the input boxes. But of course, you could also modify their values. – Armin Commented Nov 22, 2012 at 10:41
• i cant modify their values!! – Osiris Commented Nov 22, 2012 at 10:42
• and also i dont want to add input box with $('#navigate td').each(function(idx){$(this).html('<input type="text" value="' + idx + '" style="width:25px;" />');}); , inptt data es from database – Osiris Commented Nov 22, 2012 at 10:48

2 Answers 2

I put together a fiddle with the functionality you specified http://jsfiddle/tppiotrowski/L7cm8/10/. I hope I understood your requirements correctly. Let me know if you need any alterations or do not understand the code. Good luck!

var active = 0;
//$('#navigate td').each(function(idx){$(this).html(idx);});
rePosition();

$(document).keydown(function(e) {
    reCalculate(e);
    rePosition();
    // if key is an arrow key, don't type the user
    // input. if it is any other key (a, b, c, etc)
    // edit the text
    if (e.keyCode > 36 && e.keyCode < 41) {
        return false;
    }
});

$('td').click(function() {
    active = $(this).closest('table').find('td').index(this);
    rePosition();
});


function reCalculate(e) {
    var rows = $('#navigate tr').length;
    var columns = $('#navigate tr:eq(0) td').length;
    var temp;

    if (e.keyCode == 37) { //move left or wrap
        temp = active;
        while (temp > 0) {
            temp = temp - 1;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 38) { // move up
        temp = active;
        while (temp - columns >= 0) {
            temp = temp - columns;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 39) { // move right or wrap
        temp = active;
        while (temp < (columns * rows) - 1) {
            temp = temp + 1;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 40) { // move down
        temp = active;
        while (temp + columns <= (rows * columns) - 1) {
            temp = temp + columns;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
}

function rePosition() {
    console.log(active);
    $('.active').removeClass('active');
    $('#navigate tr td').eq(active).addClass('active');

    var input = $('#navigate tr td').eq(active).find('input').focus();
    scrollInView();
}

function scrollInView() {
    var target = $('#navigate tr td:eq(' + active + ')');
    if (target.length) {
        var top = target.offset().top;

        $('html,body').stop().animate({
            scrollTop: top - 100
        }, 400);
        return false;
    }
}​

Take a look at this JQFAQ post How to select a table cell using click or navigation keys? this have some thing you want.