这篇博客展示了如何使用jQuery将JSON数据加载到HTML页面，并动态创建表格以显示项目编码、项目名称、项目特征等信息。点击标题可以显示或隐藏对应的详细表格内容。
效果图：
html:
<body>
<div class="main">
<table class="bt">
<tr>
<th style="width:86px;">序号</th>
<th style="width:318px;">项目编码</th>
<th style="width:27%;">项目名称</th>
<th style="width:27%;">项目特征</th>
<th style="width:128px;">工程量</th>
<th style="width:128px;">计量单位</th>
<th style="width:115px;">详情</th>
</tr>
</table>
<!-- 表格数据-->
<div class="content">
<div class="qt">
<div class="title">
<span class="icon"></span>
<span class="tit"></span>
</div>
<table class="shu checkTab" id="">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
css:
body,.main{
margin: 0;
padding:0;
width:100%;
height:100%
}
.tou{
margin: 0;
width:100%;
height:40px;
}
.bt{
border: 1px solid rgb(204, 204, 204);
width: 100%;
height: 32px;
border-collapse: collapse;
line-height: 32px;
background-color: #d6dde6;
color: #272727;
font-size: 16px;
cursor: default;
}
.bt th{
border: 1px solid #fff;
text-align: center;
line-height: 32px;
height: 32px;
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
