Skip to content Skip to sidebar Skip to footer

How To Dynamically Modify Css Class Using Javascript / Jquery With Wrapper?

I have an existing html code of table. eg.

Solution 1:

Use .wrap, wraps an HTML structure around each element in the set of matched elements

$('.old-style').wrap('<div class="responsive-table"></div>').removeClass().addClass('table table-bordered table-condensed');
.responsive-table {
  color: red;
}
.table {
  font-weight: bold;
}
.table-bordered {
  border: 2px solid black;
}
.table-condensed>tbody>tr>td,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>td,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>thead>tr>th {
  padding: 5px
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><divclass="content-entry"><tableclass="old-style"><tr><td>Hello</td></tr></table></div>

Note: Calling .removeClass with no arguments will remove all of the item's classes.

Post a Comment for "How To Dynamically Modify Css Class Using Javascript / Jquery With Wrapper?"