Traversing cells

Traversing each cell in the table in row-wise manner

by Rohit Bisht

HTML

<table class="editableTable">
       
        <tbody>
            <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
        </tbody>
    </table>

CSS

.editableTable {
    border:solid 0px;
    width:100%;
    text-align:center
}
.editableTable td {
    border:solid 0.5px;
    border-color:lightblue;
    width:50px;
}
.editableTable .cellEditing {
    padding: 0;   
}
select{
  border:0px;
  width:100%;
}

JavaScript

$(function() {
    $("td").dblclick(function() {
        var OriginalContent = $(this).text();
        $(this).addClass("cellEditing");
        $(this).html("<select><option>1</option><option>2</option><option >3</option></select>");
        $(this).children().first().focus();
        $(this).bgColor = 'red';

        $(this).children().first().keypress(function(e) {
            if (e.which == 13) {
                var newContent = OriginalContent;
                $(this).parent().text(OriginalContent);
                $(this).parent().removeClass("cellEditing");
            }
        });
        $(this).children().first().blur(function() {
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
        });
    });
});
$("td").bind('keydown', function(event) {
    if (event.keyCode === 9 || event.keyCode === 13) {
        var currentDiv = event.target;
        var next = $(currentDiv).parents("td").next("td").dblclick();
        var OriginalContent = next.text();        
        return false;
    }
});
$("td:last-child").bind('keydown', function(event) {
    if (event.keyCode === 9 || event.keyCode === 13) {
        var currentDiv = event.target;
        var next = $(currentDiv).closest('tr').next().find('td:first-child').focus().dblclick();
        var OriginalContent = next.text();        
        return false;
    }
});