如何使用Javascript / jQuery与包装器动态修改CSS类？ [英] How to dynamically modify CSS class using Javascript / jQuery with wrapper?

问题描述

例如。

 < div class =content-entry> 
< table class =old-styleborder =3> 
< tr align =middle> 
< td style =font-weight：bold>< / td> 
< / tr> 
< / table> 
< / div> 
  

我想有条件地删除当前表的所有属性/类，注入包装器< div> 并应用css类样式以使用Javascript / jQuery覆盖现有表行为。

conten-entry 可能有多个表块，我想对所有这些块应用相同的样式更改。

to：

 < div class =content-entry> 
< div class =respond-table> 
< table class =table table-bordered table-condensed> 
< tr> 
< td>< / td> 
< / tr> 
< / table> 
< / div> 
< / div> 
  

如何在不更改原始html代码的情况下执行此操作？

解决方案

使用 .wrap ，在匹配元素集合中的每个元素周围包裹一个HTML结构

  .responsive-table {color：red;}。table {font-weight：bold;}。table-bordered {border：2px solid black;}。table-condensed> tbody> tr> td， -condensed> TBODY> TR>日。表冷凝> TFOOT> TR> TD，。表冷凝> TFOOT> TR>日.ta纯粹的>>                 -html prettyprint-override> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>< /脚本>< div class =content-entry> < table class =old-style> < TR> < TD>你好< / TD> < / TR> < / table>< / div>  

注意：调用 .removeClass ，没有参数将删除所有项目的类。

I have an existing html code of table.

eg.

<div class="content-entry">
    <table class="old-style" border="3">
        <tr align="middle">
            <td style="font-weight:bold"></td>
        </tr>
    </table>
</div>

I would like to conditionally remove all attributes/classes of the current table with the injection of a wrapper <div> and apply css class style to override the existing table behavior using Javascript / jQuery.

conten-entry might have multiple table blocks, and I would like to apply the same style change to all of them.

to:

<div class="content-entry">
    <div class="responsive-table">
        <table class="table table-bordered table-condensed">
            <tr>
                <td></td>
            </tr>
        </table>
    </div>
</div>

How can I do this without changing the original html code?

解决方案

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
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="content-entry">
  <table class="old-style">
    <tr>
      <td>Hello</td>
    </tr>
  </table>
</div>

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

这篇关于如何使用Javascript / jQuery与包装器动态修改CSS类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！