[前端练习]两个table左右移数据V1.0---jquery实现

最新推荐文章于 2024-05-29 09:30:57 发布

蘑菇均

最新推荐文章于 2024-05-29 09:30:57 发布

阅读量1.4k

点赞数 1

分类专栏：前端填坑

本文链接：https://blog.csdn.net/zhoujun8066/article/details/79771941

版权

本文介绍了一种使用jQuery实现的表格数据左右移动的方法，通过展示结果、HTML、CSS和JavaScript代码，详细阐述了如何设置块级元素的float属性来使多个元素在同一行显示，适用于前端开发中的交互设计。

摘要由CSDN通过智能技术生成

一、展现结果

二、代码

1.HTML代码

<!DOCTYPE html>
<html>
<head>
	<title>两个table左右移数据</title>
	<meta charset="utf-8 text/html">
	<script type="text/javascript" src="../../../lib/js/jquery/jquery.js"></script>
</head>
<body>
	<div style="float: left;">
		<div style="float: left;">
			<label class="labelTitle">可选图书</label>
			<div class="table-div">
				<table>
					<thead>
						<tr>
							<th>书籍名称</th>
							<th>作者</th>
							<th>类型</th>
						</tr>
					</thead>
					<tbody id="selectTbodyId"></tbody>
				</table>
			</div>
		</div>
		<div style="width: 50px;height: 100px;margin-top: 100px;margin-left:10px;float: left;">
			<div>
				<input type="button" id="itemAddBtn" value=">>" />
			</div>
			<div style="margin-top: 30px;">
				<input type="button" id="itemDelBtn" value="<<" />
			</div>
		</div>
		<div style="float: left;">
			<label class="labelTitle">已选图书</label>
			<div class=" table-di

最低0.47元/天解锁文章

蘑菇均

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
[前端练习]两个table左右移数据V1.0---jquery实现

一、展现结果二、代码1.HTML代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;两个table左右移数据&lt;/title&gt; &lt;meta charset="utf-8 text/html"&gt; &lt;script type="text/javascript" sr
复制链接

扫一扫

专栏目录