jq实现表格上移/下移/置顶功能

最新推荐文章于 2023-11-08 14:03:06 发布
最新推荐文章于 2023-11-08 14:03:06 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： 日常开发 功能实现 文章标签： jq table

这里主要是运用了选择器的一些知识，全部代码如下：

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery实现表格行上移下移和置顶</title>
<meta name="keywords" content="jquery,滑动" />
<meta name="description" content="Helloweba文章结合实例演示HTML5、CSS3、jquery、PHP等WEB技术应用。" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style type="text/css">
.demo{width:600px; margin:60px auto 10px auto; font-size:16px}
.table {border-collapse: collapse !important;width: 100%;max-width: 100%;margin-bottom: 20px;}
.table td,.table th {background-color: #fff !important;}
.table-bordered th,.table-bordered td {border: 1px solid #ddd !important;}
.table tr td {padding: 8px;line-height: 1.42857143;vertical-align: middle;border-bottom: 1px solid #ddd;}
.table tr:hover {background-color: #f5f5f5;}
</style>
<script type="text/javascript" src="assets/js/jquery-3.2.1.min.js"></script>
<script>
$(function(){
 //上移
 var $up = $(".up")
 $up.click(function() {
  var $tr = $(this).parents("tr");
  if ($tr.index() != 0) {
   $tr.fadeOut().fadeIn();
   $tr.prev().before($tr);
  }
 });
 //下移
 var $down = $(".down");
 var len = $down.length;
 $down.click(function() {
  var $tr = $(this).parents("tr");
  if ($tr.index() != len - 1) {
   $tr.fadeOut().fadeIn();
   $tr.next().after($tr);
  }
 });
 //置顶
 var $top = $(".top");
 $top.click(function(){
  var $tr = $(this).parents("tr");
  $tr.fadeOut().fadeIn();
  $(".table").prepend($tr);
  $tr.css("color","#f60");
 });
});
</script>
</head>
<body>
<div id="main">
 <div class="demo">
  <table class="table">
   <tr>
    <td>HTML5获取地理位置定位信息</td>
    <td>2015-04-25</td>
    <td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
   </tr>
   <tr>
    <td>CSS+Cookie实现的固定页脚广告条</td>
    <td>2015-04-18</td>
    <td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
   </tr>
   <tr>
    <td>纯CSS3制作漂亮的价格表</td>
    <td>2015-04-10</td>
    <td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
   </tr>
   <tr>
    <td>jQuery实现的测试答题功能</td>
    <td>2015-03-29</td>
    <td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
   </tr>
  </table>
 </div>
</div>
</body>
</html>
wangle_style
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery.jqGrid.js顶部工具栏扩展
04-24
jqGrid顶部工具栏扩展，可将导航按钮及自定义按钮添加到表格的顶部，使用方法见https://blog.csdn.net/liandi_123456/article/details/89501692
jquery实现标签上移、下移、置顶
01-19
eg:如在后台的标签列表中，实现上移、下移、置顶功能 主要实现思路是节点操作，比如说：上移，直接把点击项移动到前一个节点，以此类推，当然实际代码实现还要加些判断，如当前点击操作项是否已经是置底或置底了，...
jquery实现节点上下移动
qq_46872379的博客
07-29 546
jquery实现节点上下移动。
jquery实现表格行上移下移和置顶
agi52790的博客
01-22 168
注意引本地的jquery~ <!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>jQu...
表格动态展示与下钻
zengshaotao的专栏
09-13 2730
&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":&quo
jq实现表格上下行切换
hwt的博客
05-23 676
HTML:&lt;table&gt; &lt;tr&gt; &lt;th&gt;id&lt;/th&gt; &lt;th&gt;name&lt;/th&gt; &lt;th&gt;操作&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &
jQuery表格上移下移置顶代码.zip
07-04
这个"jQuery表格上移下移置顶代码.zip"文件包含了一个利用jQuery实现的功能，允许用户对表格中的数据行进行上移、下移和置顶操作，这在数据管理或展示界面中非常常见，比如在后台管理系统或者数据分析应用中。...
jq的灵活上移下移，编辑，删除效果
06-01
标题“jq的灵活上移下移，编辑，删除效果”指的是利用jQuery实现对元素的动态操作，如在列表中进行上移、下移、编辑和删除等常见功能。这些功能在网页界面中很常见，如任务管理器、表格数据排序或列表项管理。 首先...
jquery 实现的 select 上移、下移、左移、右移功能
11-19
实现上移和下移功能的基本思路是： 1. 获取用户当前选中的选项。 2. 检查是否可以进行移动（例如，上移时不能移到第一个选项，下移时不能移到最后一个选项）。 3. 如果可以移动，使用 `.before()` 或 `.after()` ...
基于jquery实现表格内容筛选功能实例解析
11-26
当表格内的数据较多时，我们无法一页一页的查找，这时可以通过一个搜索框来实现搜索。 对于这个搜素框，我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选，而不是填完以后点击搜索按钮再执行。 ...
实现上移下移
04-10
NULL 博文链接：https://632902651-qq-com.iteye.com/blog/1676286
JS技术实现动态置顶、置底、上移、下移
08-07
使用JS技术实现数据行的动态置顶、置底、上移、下移
SpringBoot+Vue+Element个人博客项目3-精选文章置顶
qq_38845493的博客
11-08 1117
目录 SpringBoot+Vue+Element个人博客项目 一.需求解析 二.代码的实现 第一步 修改实体及数据库 第二步 修改查询语句 第三步：测试类 第四步 补充三层结构的代码 (Controller,Service ) 第五步： 编写前端请求 三.最终效果 SpringBoot+Vue+Element个人博客项目 一.需求解析 提出需求：如图首页的精选...
使用js实现数组上移和下移，交换位置以及将目标元素移动到指定位置， 其余元素不变
weixin_50236973的博客
06-13 2257
【代码】使用js实现数组上移和下移。
JQuery表格Table操作-获取表格数据/向表格填充数据
qq_47189438的博客
06-30 1714
使用JQuery获取表格数据/向表格填充数据
js如何实现列表数据的上移和下移？以及置顶、置底功能
weixin_52099241的博客
06-21 3502
首先，调用list.splice(index - 1, 1, list[index])方法，这个方法会从list数组中删除第index-1个元素，并用第index个元素替换它。这个方法的作用是将list数组中的第index个元素和第index-1个元素交换位置，也就是将第index个元素上移一位。这个方法的作用是将list数组中的第index个元素和第index+1个元素交换位置，也就是将第index个元素下移一位。使用splice方法实现下移的原理和上移类似，只是要将当前位置的元素和下一位的元素交换。
jquery的表格组件-dataTables的基本使用
Artisan_w
10-13 4880
jQuery DataTables 是一个功能丰富且灵活的 jQuery 插件，用于创建交互式的数据表格，提供搜索、排序、分页、筛选等功能，以便更好地展示和管理数据。通过使用 jQuery DataTables，你可以轻松地将数据集转换为易于浏览和交互的表格，而无需手动编写大量的 HTML 和 JavaScript 代码。它具有广泛的配置选项和扩展，使你能够适应不同的数据源和显示需求。
案例：jQuery动态创建表格（完整代码）
m0_65085680的博客
10-11 1547
案例：jQuery动态创建表格（完整代码）
【前端】Jquery UI +PHP 实现表格拖动排序
最新发布
qq_25285531的博客
11-08 728
使用jquery ui库实现对表格拖拽排序，并且把排序保存到数据库中
jq表格反选功能代码实实现
06-11
表格反选功能是指当用户点击“反选”按钮时，会将表格中未选中的行变为选中状态，已选中的行变为未选中状态。下面是一个使用 jQuery 实现表格反选功能的示例代码： HTML代码： ```html <table id="myTable"> <thead> <tr> <th><input type="checkbox" id="checkAll"></th> <th>Name</th> <th>Age</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="select"></td> <td>John</td> <td>30</td> <td>USA</td> </tr> <tr> <td><input type="checkbox" name="select"></td> <td>Jane</td> <td>25</td> <td>Canada</td> </tr> <tr> <td><input type="checkbox" name="select"></td> <td>Tom</td> <td>40</td> <td>UK</td> </tr> </tbody> </table> <button id="invert">Invert Selection</button> ``` JavaScript代码： ```javascript $(function() { // 全选/全不选 $("#checkAll").click(function() { $("input[name='select']").prop("checked", $(this).prop("checked")); }); // 反选 $("#invert").click(function() { $("input[name='select']").each(function() { $(this).prop("checked", !$(this).prop("checked")); }); }); }); ``` 这段代码先给全选复选框 `#checkAll` 绑定了一个点击事件，当点击全选复选框时，会将所有的行复选框的选中状态与全选复选框的选中状态同步。然后给“反选”按钮 `#invert` 绑定了一个点击事件，当点击“反选”按钮时，会遍历所有的行复选框，将它们的选中状态取反。这样就实现了表格反选功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值