Pages

Thursday 20 March 2014

moving form one cell to another cell in html table using jquery

with in the script.js file write the following

$(function () {
    $('.editableTable tbody tr td:last-child').addClass('last');
    $('.editableTable tbody tr td:first-child').addClass('first');
    $("td").dblclick(function () {

   if(!$(this).hasClass('a')){
   $('.cellEditing').each(function(){
$(this).removeClass('cellEditing');
$(this).text($(this).find('input').val());
});
   $('td').removeClass("cellEditing");
        var OriginalContent = $(this).text();
       
        $(this).addClass("cellEditing");
        $(this).html("<input type='text' value='" + OriginalContent + "' />");
        $(this).children().first().focus();

        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("cellEditing");
            }
        });
}
       
    $(this).children().first().blur(function(){
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
    });
    });

$('td').live("keydown", function(e) {
//alert('fdg');

        if (e.which == 9 && !e.shiftKey) { //tab Key  

    if(!$(this).next().hasClass('a')){
            //alert($(this).find('input').val());
//alert($(this).val());
if($(this).find('input').val()){
$(this).removeClass('invalid');
            var OriginalContent = $(this).next().text();
//$(this).html('');
            $(this).text($(this).find('input').val());
            $(this).removeClass("cellEditing");
            if(!$(this).hasClass('last')){
            $(this).next().addClass("cellEditing");
            $(this).next().html("<input type='text' value='" + OriginalContent + "' />");
            $(this).next().children().first().focus();
}else{
var OriginalContent = $(this).parent().next().children().first().text();
$(this).parent().next().children().first().addClass("cellEditing");
$(this).parent().next().children().first().html("<input type='text' value='" + OriginalContent + "' />");
            $(this).parent().next().children().first().children().first().focus();            
}
            return false;
}else{
OriginalContent = '';
$(this).addClass('invalid');
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
             $(this).children().first().focus();
}
}
        }else if(e.shiftKey && e.keyCode == 9){
   if(!$(this).prev().hasClass('a')){
            var OriginalContent = $(this).prev().text();
//$(this).html('');
            $(this).text($(this).find('input').val());
            $(this).removeClass("cellEditing");
            if(!$(this).hasClass('first')){
            $(this).prev().addClass("cellEditing");
            $(this).prev().html("<input type='text' value='" + OriginalContent + "' />");
            $(this).prev().children().first().focus();
}else{
var OriginalContent = $(this).parent().prev().children().last().text();
$(this).parent().prev().children().last().addClass("cellEditing");
$(this).parent().prev().children().last().html("<input type='text' value='" + OriginalContent + "' />");
            $(this).parent().prev().children().last().children().first().focus();            
}
            return false;
}

}else{
$(this).addClass('edited');
}

   
    });
});

next with in the index.html write the following code

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>How to become an editable HTML table with jQuery - MrBool Tutorial</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <table class="editableTable">
        <thead>
            <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td class="a">Pedro Augusto</td>
                <td class="b">pedro.augusto@myemail.com</td>
                <td class="c">(21) 9999-8888</td>
            </tr>
            <tr>
                <td>002</td>
                <td>Paula Silva</td>
                <td>paula.silva@mymail.com</td>
                <td>(81) 8787-8686</td>
            </tr>
            <tr>
                <td>003</td>
                <td>Lucas Costa</td>
                <td>lucas.costa@myemail.com</td>
                <td>(84) 3232-3232</td>
            </tr>
<tr>
                <td>003</td>
                <td>Lucas Costa</td>
                <td>lucas.costa@myemail.com</td>
                <td>(84) 3232-3232</td>
            </tr>
<tr>
                <td>003</td>
                <td>Lucas Costa</td>
                <td>lucas.costa@myemail.com</td>
                <td>(84) 3232-3232</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

next with in the style.css write the following code

* {
    font-family:Consolas
}
 
.editableTable {
    border:solid 1px;
    width:100%
}
 
.editableTable td {
    border:solid 1px;
}
 
.editableTable .cellEditing {
    padding: 0;
}
 
.editableTable .cellEditing input[type=text]{
    width:100%;
    border:0;
    background-color:rgb(255,253,210);  
}

.invalid{
border:1px solid red !important;
}

.edited{
    background: url("tick.png") no-repeat scroll right center rgba(0, 0, 0, 0);
}

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)