AjaxTable

Tabela com alimentação ajax usando jquery

by edgardleal

HTML

<table class="ui-state-default">
    <thead>
        <tr class="ui-widget ui-state-default">
            <th></th>
            <th>Código</th>
            <th>Descrição</th>
            <th>Vigência</th>
            <th>R$ À Vista</th>
            <th>F. Pagm.</th>
            <th><input type="checkbox"/></th>
        </tr>
    </thead>
<tbody>
    
</tbody>    
</table>

CSS

body{
    background : green;
}

th{
    padding : 10px;
}

JavaScript

function newTr(i){
 return $('<tr class="ui-widget-content"> ' +
'            <td class="ui-widget ui-state-default">' + i + '</td>' +
'            <td>54848</td> ' +
'            <td>Refrigerador Brastemp</td>' +
          '            <td style="font-size:11px">01/01/13 à 31/01/13</td>' +          
'            <td>R$ 1.500,00</td>' +
'            <td>CARTAO</td>' +
'            <td>' +
'                <input type="checkbox" />' +
'            </td>' +
          '    </tr>   ').mouseover(function(){
        $(this).addClass('ui-state-hover');
 }).mouseout(function(){
    $(this).removeClass('ui-state-hover');
 });
}
for(i = 0 ; i < 15; i++)
   $('tbody').append(newTr(i));