This paragraph was inserted following an ajax request:
<tr id="product1" class = "success">
<td>1</td>
<td>product one</td>
</tr>
The success class gives the row a green background, but this style is not applied since the row was added dynamically.
I have seen solutions involving dynamic loading of CSS, but I am curious about the most efficient approach, especially when dealing with a large stylesheet.
I am using Bootstrap:
<table id = "table_result" class="table">
<thead id ="table_result_search">
<tr>
<th>#</th>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
and jQuery:
//ajax
var tr = TrTableResult(id,nome, stock, price, n);
$("#table_result_search").append(tr);
//end of ajax
function TrTableResult(id,nome,stock,price,n){
var color = new Array("success", "error", "warning", "info");
var tr = '<tr id ="'+id+'" class="' + color[n] + '">';
tr+= '<td>'+ id +'</td>';
tr+= '<td>'+ product+'</td>';
tr+= '<td>'+ price +'</td>';
tr+= '<td>'+ stock +'</td>';
tr+= '</tr>';
return tr;
}