Question

我在将CSS添加到通过ajax创建的表格时遇到问题。

当我使用jQuery将CSS添加到新创建的行时，它不仅仅应用于现有的表头，表格中也已经有了一个类可排序的＆＃39;它也没有应用于使用ajax调用

创建的行

为什么会这样？

的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

你有这条线的地方

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

尝试

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

它应该将CSS propetry设置为附加行

将CSS添加到使用jQuery创建的表行

1 个答案: