Question

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

例如

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

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

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代码的情况下执行此操作？

Answer 1

使用.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将删除所有项目的类。

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

1 个答案: