index.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Table Edit</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            body{font-size:12px; font-family:verdana; font-color:#333;}
            body h1{color:#069; text-align: center;}
            body p{width:850px; margin:auto; position:relative; text-align:center; }
            body #code{width:950px; margin:auto;}
            body table{border:0px; align:center;}
            body table thead tr th{background:#333; color:#fff; padding:3px 10px;}
            body table tbody tr td{background:#ececec; padding:3px 10px;}
            body table tbody tr td input{border:1px solid #ccc;}
            body table tbody tr td a{color:#069; text-decoration: none;}
            body table tbody tr td a:hover{color:red; text-decoration: none;}
            body xmp{border:1px solid #999; border-radius:10px; padding:10px; color:#333; float:left; clear: both;}
            footer{float:left; width:100%; padding:30px 0px; text-align: center; line-height:25px;}
        </style>
        <script src="js/jquery-2.1.0.min.js"></script>
        <script src="js/tableEdit-0.1.js"></script>
        <script>
            
            $(function(){
                $("#tableEdit").tableEdit({
                    columnsTr: "2,3",
                    enableDblClick: true, //enable edit td with dblclick
                    callback: function(e){
                        console.log(e.city);
                        console.log(e.age);
                        /*
                         * code for ajax
                         */
                    }, 
                    activeMasks: function(){
                       console.log("function enable masks");
                       /*
                        * function for active masks
                        */
                    }
                });
            })
            
        </script>
    </head>
    <body>
        <h1>Table Edit</h1>
        
        <p>
            How to use?
        <div id="code">
<xmp>
<head>
<!-- jquery framework load -->
<script src="js/jquery-2.1.0.min.js"></script>

<!-- plugin tableEdit load -->
<script src="js/tableEdit-0.1.js"></script>

<!-- load plugin for element -->
<script>
$(function(){
        $("#tableEdit").tableEdit({
                    columnsTr: "2,3", //null = all columns editable
                    enableDblClick: true, //enable edit td with dblclick
                    callback: function(e){
                        console.log(e.city);
                        console.log(e.age);
                        /*
                         * code for ajax
                         */
                    }, 
                    activeMasks: function(){
                       console.log("function enable masks");
                       /*
                        * function for active masks
                        */
                    }
                });
})
</script>
</head>

<body>
    <table id="tableEdit" align="center" >
            <thead>
                <tr>
                    <th>Edit</th>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="javascript:;" class="btEdit">Edit</a></td>  <!-- class btEdit to button edit this row -->
                    <td ref="type:text, name:nome, class:nomeClasse, id:nomeId">Samuel</td> <!-- ref define all attributes of new input -->
                    <td ref="type:text, name:age, class:ageClasse, id:ageId">26</td> <!-- ref define all attributes of new input -->
                    <td ref="type:text, name:city, class:cityClasse, id:cityId">Jundiaí</td> <!-- ref define all attributes of new input -->
                </tr>
                <tr>
                    <td><a href="javascript:;" class="btEdit">Edit</a></td>
                    <td>Joana</td>
                    <td>28</td>
                    <td>Campinas</td>
                </tr>
                
            </tbody>
        </table>
</body>
            
            
        
</xmp>
        </div>
</p>

<br style="clear: both;">
        <div id="sample1">
        <table id="tableEdit" align="center">
            <thead>
                <tr>
                    <th>Edit</th>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="javascript:;" class="btEdit">Edit</a></td>
                    <td ref="type:text, name:nome, class:nomeClasse, id:nomeId">Samuel</td> <!-- ref define all attributes of new input -->
                    <td ref="type:text, name:age, class:ageClasse, id:ageId">26</td> <!-- ref define all attributes of new input -->
                    <td ref="type:text, name:city, class:cityClasse, id:cityId">Jundiaí</td> <!-- ref define all attributes of new input -->
                </tr>
                <tr>
                    <td><a href="javascript:;" class="btEdit">Edit</a></td>
                    <td>Joana</td>
                    <td>28</td>
                    <td>Campinas</td>
                </tr>
               
            </tbody>
        </table>
        
        </div>
        

        <br/>
        <br/>

        
        
        <footer>
            sessistemas.com.br 2021 - <a href="mailto:samuelsantosdev@gmail.com">samuelsantosdev@gmail.com</a>
            <br/>
            <a href="https://github.com/samuelsantosdev/TableEdit" target="_blank">https://github.com/samuelsantosdev/TableEdit</a>
            <br/>
            Deus é fiel.
        </footer>
        
</body>
</html>