配合bootstrap实现的table 嵌套table

最新推荐文章于 2024-07-31 21:57:52 发布

转载最新推荐文章于 2024-07-31 21:57:52 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webSong/p/6346579.html

文章标签：

#javascript #数据结构与算法 #ViewUI

本文介绍了一种使用Bootstrap CSS库构建股票代码选择界面的方法。该界面通过表格形式展示股票代码，并允许用户通过拖拽操作来区分会被清仓与不会被清仓的股票代码。此外，还提供了全选功能。

不要忘了引入bootstrap.css库

html部分

		<div class="container">
			<div class="row">
				<div class="col-sm-10">
					<table class="table table-bordered">
						<thead style="background: #ccc;">
							<tr>
								<th>会被清仓代码</th>
								<th>操作</th>
								<th>不会被清仓代码</th>
							</tr>
						</thead>
						<tbody>
							<td style="width: 330px;">
								<ul class="hidden">
									<li>
										<span><input type="checkbox" /></span>
										<span>1</span>
										<span>股票代码的详细信息</span>
									</li>
									<li>
										<span><input type="checkbox" /></span>
										<span>1</span>
										<span>股票代码的详细信息</span>
									</li>
								</ul>
							</td>
							<td class="text-center" style="width: 118px;">
								<div style="display: inline-block;">
									<div class="btn btn-default">向右</div>
									<div>向左</div>
								</div>
							</td>
							<td style="width: 330px;">
								<ul class="hidden">
									<li>
										<span><input type="checkbox" /></span>
										<span>1</span>
										<span>股票代码的详细信息</span>
									</li>
									<li>
										<span><input type="checkbox" /></span>
										<span>1</span>
										<span>股票代码的详细信息</span>
									</li>
								</ul>
							</td>
						</tbody>
						<tfoot>
							<tr>
								<td>
									<label><input type="checkbox" />全选</label>
								</td>
								<td></td>
								<td>
									<label><input type="checkbox" />全选</label>
								</td>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</div>

转载于:https://www.cnblogs.com/webSong/p/6346579.html