Adding CSS to table rows created with jQuery

Question

I have a problem with adding CSS to tablerows that are created through ajax.

When I use jQuery to add the CSS to the newly created rows it doesn't get applied only to the existing table header, also the table already has a class 'sortable' which also doesn't get applied to the rows created with the ajax call

why is this?

JavaScript

var timer;

$('#order_supplier').on('keyup', 'input', function(){

    var articlecode = $(this).val();
    var article_description = $(this).closest('tr').next('tr').find('.article_description');
    var table_values = $('.supplier, .mainsupplier, .price, .articlecode');

    clearTimeout(timer);

    if(articlecode.length > 0) {
        timer = setTimeout(function(){
            $.ajax({
                            type: 'POST',
                            data: 'articlecode='+ articlecode,
                            dataType: 'json',
                            url: 'bart_test3.php',
                            success: function(result){
                if(result){
                    var tr = '';

                    $.each(result, function(i, item){
                        $(article_description).css("font-style", "").val(item.descr);

                        tr += '<tr valign="top">' +
                            '<td class="supplier">' + item.name +
                            '</td><td class="mainsupplier">' + item.mainsupplier +
                            '</td><td class="price">' + item.price +
                            '</td><td class="articlecode">' + item.partno +
                            '</td></tr>';
                    });

                    $('#supplier_table tr:even').addClass('even');
                    $('#supplier_table tr:odd').addClass('odd');
                    $('#supplier_table').append(tr);

                } else {
                    $(article_description).css("font-style", "italic").val('Invalid article code');
                    $(table_values).remove();
                }
            }});
                    }, 100);
    } else {
        $(article_description).css("font-style", "italic").val('No article code specified');
        $(table_values).remove();
    }

});

HTML

<table id='supplier_table' class='sortable' width='100%'>
    <THEAD>
        <tr valign='top'>
            <th width='25%'>Supplier</th>
            <th width='25%'>Mainsupplier</th>
            <th width='25%'>Price</th>
            <th width='25%'>Articlecode</th>
        </tr>
    </THEAD>
    <TBODY >
    </TBODY>
</table>

Answer 1

Where you have this line

$('#supplier_table').append(tr);

Try

$('#supplier_table').append(tr).css({'prop1':'value','prop2':'val2'});

It should set the CSS propetry to the appended row