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>

Can't believe such a simple change would fix it, thanks alot! — Bart
– Bart, Commented Mar 9, 2016 at 13:47
Why are you adding odd/even classes? Just do it with CSS unless you are supporting some really old browser. — epascarello
– epascarello, Commented Mar 9, 2016 at 14:14
@epascarello like I said, for some reason the CSS doesn't get applied to the AJAX response, so I need to add the classes specifically to the returned rows — Bart
– Bart, Commented Mar 9, 2016 at 16:03
What you are saying is that the table sort code you are using is not set up with p:nth-child(2)? Do you not call the "sortable()" plugin to tell it that the table is updated? — epascarello
– epascarello, Commented Mar 9, 2016 at 16:07

Sabbin · Accepted Answer · 2016-03-09 14:12:03Z

2

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

answered Mar 9, 2016 at 14:12

Sabbin

2,4632 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding CSS to table rows created with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related