JQ,js给所有table元素标签添加样式类，并且外面再套一个div

原创

cplvfx 2022-06-17 16:50:15 博主文章分类：JS ©著作权

文章标签 bootstrap html 响应式 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者cplvfx的原创作品，请联系作者获取转载授权，否则将追究法律责任

如果不理解可以看下面文章

如何用js(jq)给html元素标签前面或者后面增加一个元标签

<script>
$(document).ready(function(){
var that=$("#body").find("table");
that.wrap('<div class="table-responsive"></div>');
for(var i=0; i<that.length;i++)
{
that.eq(i).addClass("table");
}
});
</script>

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap 实例 - 响应式表格</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div id="body">
 <!--table1-->
<table class="table">
  <caption>响应式表格布局1</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td>
    </tr>
    <tr>
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td>
    </tr>
    <tr>
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td>
    </tr>
    <tr>
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td>
    </tr>
  </tbody>
</table>
  <!--table2-->
<table class="table">
  <caption>响应式表格布局2</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td>
    </tr>
    <tr>
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td>
    </tr>
    <tr>
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td>
    </tr>
    <tr>
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td>
    </tr>
  </tbody>
</table>

 <!--table3-->
<table class="table">
  <caption>响应式表格布局3</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td>
    </tr>
    <tr>
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td>
    </tr>
    <tr>
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td>
    </tr>
    <tr>
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td>
    </tr>
  </tbody>
</table>
 </div>
 <script>
$(document).ready(function(){
var that=$("#body").find("table");
console.log(that);
console.log(that.length);
//给所有table元素标签外层嵌套一个div标签
that.wrap('<div class="table-responsive"></div>');
for(var i=0; i<that.length;i++)
{
//给所有table元素标签添加一个样式类
that.eq(i).addClass("table");
}
});
</script>
</body>
</html>