如何使用带包装器的Javascript/jQuery动态修改CSS类

How to dynamically modify CSS class using Javascript / jQuery with wrapper?

本文关键字：动态 jQuery 修改 CSS Javascript 何使用 包装      更新时间：2023-09-26

我有一个表的现有html代码。

例如。

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

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

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

至：

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

如何在不更改原始html代码的情况下做到这一点？

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

$('.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>

注意：调用不带参数的.removeClass将删除该项的所有类。

相关文章：