Create Empty Table and Do Insert Data

Viewed 316

I wanted to create a table to do enter code hereinsert, update and delete.

The idea was to replace the form with a table, for example create a table only with the header and a blank line ready to insert data, after filling the first line or create the second line dynamically or put a button add line and return to write the content and insert and so on. I'm trying this way, but so I can not write in the columns to then do the insert:

<table id="products-table"> 
    <tbody>  
        <tr>       
            <th>Produto</th>       
            <th>Código</th>    
            <th>Quantidade</th>    
            <th>Preço</th>     
            <th>Ações</th>   
        </tr>   
        <tr>       
            <td>&nbsp;</td>    
            <td>&nbsp;</td>    
            <td>&nbsp;</td>    
            <td>&nbsp;</td>    
            <td>         
            <button onclick="RemoveTableRow(this)" type="button">Remover</button>      
            </td>    
        </tr>   
    </tbody>    
    <tfoot>  
        <tr>      
            <td colspan="5" style="text-align: left;">
                <button onclick="AddTableRow()" type="button">Adicionar Produto</button>      
            </td>   
        </tr>   
    </tfoot>    
</table>    

<script>
(function($) {
    AddTableRow = function() {  
    var newRow = $("<tr>");     var cols = "";  
    cols += '<td>&nbsp;</td>';  
    cols += '<td>&nbsp;</td>';  
    cols += '<td>&nbsp;</td>';  
    cols += '<td>&nbsp;</td>';  
    cols += '<td>';  
    cols += '<button onclick="RemoveTableRow(this)" type="button">Remover</button>';
    cols += '</td>';    
    newRow.append(cols);    
    $("#products-table").append(newRow);    
    return false;   
    };
})(jQuery); 
</script> 

But I question, does it make sense to create a table to replace the form in html?

1 Answers

It does make sense, and I'd advise you to have a look at DataTable which enables you to handle such use cases with the proper callbacks and all. Only limitation is you need jQuery.

Related