jQuery-页面元素综合案例

最新推荐文章于 2023-08-12 23:26:31 发布

VIP文章羊咩咩的小脑袋~

最新推荐文章于 2023-08-12 23:26:31 发布

阅读量1.3k

点赞数 1

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_69036336/article/details/127497770

版权

页面元素综合案例，如下图所示：

点击上面的刷新按钮可以显示如下的数据内容，并且可以实现元素的选中，删除，批量删除等功能，如下图所示：

该效果为页面元素综合案例效果图，下面我们将实现这个效果。

一，先写HTML页面

由图分析，需要的元素有“button”刷新的按钮，一个大的“table”表格，“thead”表格的表头内容，里面包含tr th标签，“tbody”表格的主体内容，里面包含tr td标签。

<body>
		<button id="refresh">刷新</button>
		<hr/>
		<table>
			<thead>
				<tr>
					<th>勾选</th>
					<th>编号</th>
					<th>名称</th>
					<th>价格</th>
					<th>品牌</th>
					<th>操作</th>
				</tr>
			</thead>
			<tr>
			<tbody id="list">
					<!-- <td><input type="checkbox" class="check" /></td>
					<td>1</td>
					<td>方便面</td>
					<td>1.0</td>
				    <td>康师傅</td>
					<td>
						<a href=&