What is the most efficient way to reload CSS after adding data dynamically using jQuery?

Question

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;
}

You don't have to reload CSS : it's always applied, even to dynamically added elements. — Denys Séguret
– Denys Séguret, Commented Mar 11, 2013 at 7:09
"...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
– T.J. Crowder, Commented Mar 11, 2013 at 7:10
How do you load your content with ajax? Please post your JS script — Maen
– 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
– Matus, Commented Mar 11, 2013 at 7:10
you dont have to reload the css have a look at jsfiddle.net/eQeZg/3 — Dakait
– Dakait, Commented Mar 11, 2013 at 7:12

T.J. Crowder · Accepted Answer · 2013-03-11 07:27:39Z

8

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 comments, 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

edited Mar 11, 2013 at 7:27

answered Mar 11, 2013 at 7:13

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

steveax Over a year ago

Department of redundancy department ;-)

John Paul Cárdenas Over a year ago

thanks, I made a mistake I had to charge the "tbody" and was loading the "thead", thank you very much everyone for your responses.

Collectives™ on Stack Overflow

What is the most efficient way to reload CSS after adding data dynamically using jQuery?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related