This row was added after an ajax call:

<tr id="product1" class = "success">
    <td>1</td>
    <td>product one</td>
</tr>

the class success puts a green background to the row, but obviously this style is lost because the row was added dynamically.

I've seen solutions by dynamic loads of CSS, but I want to know which would be the most efficient if you get to have an extensive stylesheet. thanks

i'm using boostrap:

        <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,nombre, stock, price, n);
$("#table_result_search").append(tr);
//fin ajax
function TrTableResult(id,nombre,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;
}

This row was added after an ajax call:

<tr id="product1" class = "success">
    <td>1</td>
    <td>product one</td>
</tr>

the class success puts a green background to the row, but obviously this style is lost because the row was added dynamically.

I've seen solutions by dynamic loads of CSS, but I want to know which would be the most efficient if you get to have an extensive stylesheet. thanks

i'm using boostrap:

        <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,nombre, stock, price, n);
$("#table_result_search").append(tr);
//fin ajax
function TrTableResult(id,nombre,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;
}

• javascript
• jquery
• css
• twitter-bootstrap

• 9 You don't have to reload CSS : it's always applied, even to dynamically added elements. – Denys Séguret Commented Mar 11, 2013 at 7:09
• 4 "...but obviously this style is lost because the row was added dynamically." That's not obvious at all. CSS is applied to elements that match the selectors, whether they're added dynamically or not. – T.J. Crowder Commented Mar 11, 2013 at 7:10
• How do you load your content with ajax? Please post your JS script – Maen Commented Mar 11, 2013 at 7:10
• Why do you think it's lost? I think this should work as expected, if it doesn't, the problem might be somewhere else. Post the CSS class, please. – Matus Commented Mar 11, 2013 at 7:10
• you dont have to reload the css have a look at jsfiddle/eQeZg/3 – Dakait Commented Mar 11, 2013 at 7:12

1 Answer 1

Updated answer:

Now that you've quoted your markup and code, it's clear that you do have the table class, so the original answer below isn't it.

But note that you're appending your tr to your thead element:

$("#table_result_search").append(tr);

Where your markup is:

<thead id ="table_result_search">

You're not seeing any effect of the success class because the rule is:

.table tbody tr.success > td {
  background-color: #dff0d8;
}

Note the tbody in there. So the selector doesn't match, because you're appending the row to a thead, not a tbody.

Original answer:

As several of us have pointed out in the ments, CSS is applied by the browser to all elements that match the relevant selectors, whether added dynamically or not.

If the problem is that the success class doesn't seem to be working, it's probably that you're missing the table class from your table element (yes, really).

The rule in bootstrap's CSS is:

.table tbody tr.success > td {
  background-color: #dff0d8;
}

Note that it starts with a class selector (.table), not a tag selector (table).

So for instance, this markup will not apply those styles to the td in this table:

<table>
  <tbody>
    <tr id="product1" class = "success">
      <td>1</td>
      <td>product one</td>
    </tr>
  </tbody>
</table>

Live Example | Source

But this markup (only change is to the table tag) will:

<table class="table">
  <tbody>
    <tr id="product1" class = "success">
      <td>1</td>
      <td>product one</td>
    </tr>
  </tbody>
</table>

Live Example | Source