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

最新推荐文章于 2021-10-16 14:05:07 发布

橙-极纪元JJY.Cheng

最新推荐文章于 2021-10-16 14:05:07 发布

阅读量1.3k

点赞数

分类专栏： JS # JQ

本文链接：https://blog.csdn.net/cplvfx/article/details/107234527

版权

JS 同时被 2 个专栏收录

163 篇文章 4 订阅

订阅专栏

113 篇文章 1 订阅

订阅专栏

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

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

https://blog.csdn.net/cplvfx/article/details/107232048

 <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>