基于jquery框架实现以行的添加、上移、下移和删除操作

最新推荐文章于 2021-03-14 23:12:55 发布
最新推荐文章于 2021-03-14 23:12:55 发布
阅读量5k 收藏
点赞数
分类专栏： Jquery 文章标签： jquery 框架 class input function border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lqc851011/article/details/5258873
版权
本文展示了如何利用jQuery框架实现表格行的添加、上移、下移和删除功能。通过添加JavaScript函数，实现了点击按钮时动态改变HTML结构，以达到操作行的目的。
摘要由CSDN通过智能技术生成
基于jquery框架实现以行的添加、上移、下移和删除操作

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>上海心源计算机技术有限公司--开发网站一览表</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var num = 2;
//添加账号操作
function addLi()
{
 num++;
 var htmls = "<li class='li3'>";
 htmls = htmls + "<span class='span1'><a class='a1'>账号"+num+"：</a></span>";
    htmls = htmls + "<span><a class='a1'>账号名称：</a><input type='text' class='input1' name='newName[]' /></span>";
 
 htmls = htmls + "<span class='span2'>";
 htmls = htmls

最低0.47元/天 解锁文章
lqc851011
关注
专栏目录
使用vue实现的树形结构组件BasicTree
zhiy9ong的博客
01-11 3538
tree组件的经验总结     最近项目中有了树形结构的功能需求，要求能够将分类信息使用树形结构展示、新增节点、删除节点、选择节点等功能，项目中使用了iview框架作为视图层框架，iview本身也提供了树形结构示例，但是其ui风格并不符合设计稿需求，没办法一开始的想法是请求外援，网上找到了jquery的著名插件ztree插件，其功能非常强大完全符合项目的功能性需求，但是由于项目是基于vue技术构...
客户端网页API（应用接口程序）
aaxin_666的博客
01-25 4985
Web API 简介 什么是API 应用程序接口（API）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。 来看一个现实世界中的例子：想想您的房子、公寓或其他住宅的电力供应，如果您想在您的房子里使用一个设备，只要把电源插头插入插座即可，而不会直接把它连接到进户的电线上 - 这样做非常低效，而且如果您不是电工，这么做将是困难和危险的...
jquery动态增加修改删除表格,上移下移功能
04-29
jquery做的动态增加修改删除表格,上移下移功能,实际项目应用的,大家试试,支持多表格
jquery实现table动态添加行、删除行以及行的上移和下移 20190804新版
lvshuocool的博客
08-14 416
表格排序 //增加行add_tr //删除行remove_tr //排序--向上move_up //排序--向下move_down //第一行只显示向下，最后一行只显示向上hide_move @extends('layouts.public') @section('head') <link rel="stylesheet" href="{...
jquery实现的可增加，删除行，可多行上下移动表格
Busing的专栏
06-04 341
var rowId=1; //添加行 function addRow() { //因为表格每行都有一些效果，不得不处理下id，和其他没有关系 rowId++; var replaceString=$("#lb tr:first-child").html().replace("value=tr1","value=tr"+rowId).replace("rowId=\"1\"","r.
jQuery表格操作添加行、删除行和动态移动
cnboynet的专栏
03-11 6924
jQuery表格操作添加行、删除行和动态移动丨芯晴网页特效丨CsrCode.Cn 添加一行  删除一行  上移  下移 序号步骤名称步骤描述相关操作 var currentStep=0; var max_line_num=0; function add_line(){ max_line_num=$("#content tr:last-child").children("td")
jquery 动态控制表格，添加，删除，上移，下移，排序
无问西东的博客
08-20 2576
这个功能的实现主要运用了jquery  的遍历和DOM操作 .prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。 .next()获得匹配元素集合中每个元素紧邻的同辈元素。 .find()获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。 .eq() 将匹配元素集合缩减为位于指定索引的新元素。 after()在匹配的元素之后插入内容。 befor
jquery自定义调查问卷插件
09-20
它支持问题的动态管理，包括添加、编辑、删除以及上移和下移功能，使问卷设计更加灵活。用户可以通过鼠标悬停在问题上触发编辑操作，点击按钮来删除或调整问题的位置，从而实现问卷结构的优化。 在使用这个插件时，...
基于纯js是实现的能够在上下两个列表框及数据项位置移动的程序代码
10-29
当一个项目被选中时，通过JavaScript事件监听器捕获用户操作，然后根据用户的上移或下移指令更新DOM树。 4. **文件结构**： - `sample_select_list.htm`：这是HTML页面的示例文件，包含了两个列表框的HTML结构以及...
添加、删除、上移、下移div
10-17
通过按钮对div的操作，可添加div，删除，移动div，使用了jq
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
11-23
本文实例讲述了jQuery动态添加及删除表单上传元素的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 点击此处查看在线演示效果。 具体代码如下： <html> <head> [removed][removed] [removed] $(document).ready(function(){ $(":input[type=button][value=more]").bind("click",function(){ var $br = $(
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
11-30
一、写在前面 1. Bootstrap是一个由 Twitter 开发和维护的前端框架，目前很受欢迎，Bootstrap中文网点击这里。 2. Vue.js 是一套构建用户界面的渐进式框架，点这里访问官网。 二、实现效果： 三、页面引入bootstrap、vue资源 <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="external nofollow" > <link rel="stylesheet" href="//maxcdn.bootstrapcdn.
jquery实现表格的上移、下移、增加、删除
iteye_14221的博客
07-05 286
Js代码    $(function($){       //元素交换       $(".up").live('click',function(){           $(this).parent().parent().prev("tr").before($(this).parent().parent());       });       $(".down...
jquery动态添加表格行 移动行
daydayup0658的博客
09-15 187
html： &lt;table id="tbl"&gt;   &lt;tr&gt;     &lt;td&gt;111&lt;/td&gt;     &lt;td&gt;张三&lt;/td&gt;     &lt;td&gt;      &lt;input type="button" value="up" onclick=&q
添加、删除、上移、下移按钮的实现
草木红的博客
03-14 1392
对表格中的<tr></tr>整体进行添加、删除、上移、下移操作。并自动处理排序和按钮。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
自己修改， jquery实现table动态添加行、删除行以及行的上移和下移
lvshuocool的博客
10-08 726
jquery实现table动态添加行、删除行以及行的上移和下移             .editText {             border-width: 1px;             border-top-style: none;             border-left-style: none;             border-right-style: n
jquery实现table动态添加行、删除行以及行的上移和下移
lvshuocool的博客
10-08 2623
$(function($){     //元素交换       $(".up").live('click',function(){           $(this).parent().parent().prev("tr").before($(this).parent().parent());       });       $(".down").live('click',functi
JQuery实现table中tr上移下移
一包大豫竹的博客
01-03 2918
表格样式<table> <tr> <td><input type="button" value="上移" onclick="moveUp(this)"/></td> <td><input type="button" value="下移" onclick="moveDown(this)"/></td> </tr> <tr>
jquery实现列表上移下移和删除
最新发布
11-01
在jQuery中，实现列表项的上移、下移以及删除通常涉及到DOM操作和数组处理。以下是基本步骤： 1. **上移**：首先获取需要移动的元素，然后找到它前面的一个元素并交换它们的位置。例如，如果你想将第三个元素移到第二个位置，可以这样做： ```javascript var $listItems = $('.list-item'); var currentIndex = $listItems.index($(this)); // 获取当前元素索引 var previousIndex = (currentIndex > 0) ? currentIndex - 1 : $listItems.length - 1; // 获取前一个元素索引 var temp = $listItems.eq(currentIndex).detach(); // 先脱离当前元素 $listItems.eq(previousIndex).before(temp); // 插入到新位置 ``` 2. **下移**：类似地，只需找到后面的元素，并将当前元素插入到该位置即可： ```javascript var nextIndex = (currentIndex < $listItems.length - 1) ? currentIndex + 1 : 0; var temp = $listItems.eq(currentIndex).detach(); $listItems.eq(nextIndex).after(temp); ``` 3. **删除**：要删除一个元素，可以直接调用`.remove()`方法： ```javascript $listItems.eq(indexToBeDeleted).remove(); ``` 记得在实际应用中，`index`通常是通过事件监听（如点击事件）从用户交互中获取的。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值