Add a row in a table with tablesorter jquery

Question

I have a table buil with jquery library "Tablesorter" and I want add a row in this table when I click on a button but when I add the row , this does not take css of tablesorter .. so i cant select him, or the css "odd" "even" does not work ..

$("#ajouterCodePiece").click(function(){
    $('#tablesorter-demo-gauche tr:last').after('<tr'><td>'+$('#codepiece option:selected').text()+'</td><td>'+$('#mode option:selected').text()+'</td></tr>');
});

How can I do for add css and jquery of tablesorter in my new row .. thanks

Answer 1

Tablesorter stores all of the table content in a cache, so in order to tell tablesorter that something has changed, you'll need to trigger an update:

$('table').trigger('update');

This this updated demo

$("#ajouterCodePiece").click(function () {
    $('#tablesorter-demo-gauche tr:last').after('<tr><td>' + $('#codepiece option:selected').text() + '</td><td>' + $('#mode option:selected').text() + '</td></tr>');
    $('#tablesorter-demo-gauche').trigger('update');
});