Jquery实现table行数的增加,删除,实现指定行数的添加等应用~~~~!!!!

本文主要是介绍Jquery实现table行数的增加,删除,实现指定行数的添加等应用~~~~!!!!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

先看下效果图(帮助大家理解实现哪些功能):




先上Html代码:

<body><div class="center"><a id="addbottom">添加一行到底部</a>            <a id="addtop">添加一行到顶部</a><table border="1px" width="100%"><thead><tr><th>编号</th><th>姓名</th><th>操作</th></tr></thead><tbody></tbody></table></div>
</body>

css代码:

<style type="text/css">.center{margin-left:auto;margin-right:auto;width:600px;margin-top:100px;}table{border:1px solid #000;border-collapse:collapse;}thead{background-color:#C03;color:#FFF;}a{cursor:pointer;}
</style>


jquery:


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">$(document).ready(function(){var i = 1;$("#addbottom").click(function(){$("<tr><td>"+i+"</td><td></td><td><a id='del'>删除此行</a>  <a id='addup'>向上添加一行</a>  <a id='adddown'>向下添加一行</a></td></tr>").appendTo($("tbody"));i++;});$("#addtop").click(function(){$("<tr><td>"+i+"</td><td></td><td><a id='del'>删除此行</a>  <a id='addup'>向上添加一行</a>  <a id='adddown'>向下添加一行</a></td></tr>").prependTo($("tbody"));i++;});$("#del").live("click",function(){$(this).parent("td").parent("tr").remove();});$("#addup").live("click",function(){$(this).parent("td").parent("tr").before($("<tr><td>"+i+"</td><td></td><td><a id='del'>删除此行</a>  <a id='addup'>向上添加一行</a>  <a id='adddown'>向下添加一行</a></td></tr>"));i++;});$("#adddown").live("click",function(){alert("2");$(this).parent("td").parent("tr").after("<tr><td>"+i+"</td><td></td><td><a id='del'>删除此行</a>  <a id='addup'>向上添加一行</a>  <a id='adddown'>向下添加一行</a></td></tr>")i++;});});</script>


这篇关于Jquery实现table行数的增加,删除,实现指定行数的添加等应用~~~~!!!!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/900787

相关文章

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

CSS引入方式和选择符的讲解和运用小结

《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表,是一种用于描述网页文档(如HTML或XML)外观和格式的样式表语言,它主要用于将网页内容的呈现(外观)和结构(内容)分离,从而实现... 目录一、前言二、css 是什么三、CSS 引入方式1、行内样式2、内部样式表3、链入外部样式表四、CSS 选

Java进行日期解析与格式化的实现代码

《Java进行日期解析与格式化的实现代码》使用Java搭配ApacheCommonsLang3和Natty库,可以实现灵活高效的日期解析与格式化,本文将通过相关示例为大家讲讲具体的实践操作,需要的可以... 目录一、背景二、依赖介绍1. Apache Commons Lang32. Natty三、核心实现代

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

SpringBoot实现接口数据加解密的三种实战方案

《SpringBoot实现接口数据加解密的三种实战方案》在金融支付、用户隐私信息传输等场景中,接口数据若以明文传输,极易被中间人攻击窃取,SpringBoot提供了多种优雅的加解密实现方案,本文将从原... 目录一、为什么需要接口数据加解密?二、核心加解密算法选择1. 对称加密(AES)2. 非对称加密(R

基于Go语言实现Base62编码的三种方式以及对比分析

《基于Go语言实现Base62编码的三种方式以及对比分析》Base62编码是一种在字符编码中使用62个字符的编码方式,在计算机科学中,,Go语言是一种静态类型、编译型语言,它由Google开发并开源,... 目录一、标准库现状与解决方案1. 标准库对比表2. 解决方案完整实现代码(含边界处理)二、关键实现细

python通过curl实现访问deepseek的API

《python通过curl实现访问deepseek的API》这篇文章主要为大家详细介绍了python如何通过curl实现访问deepseek的API,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编... API申请和充值下面是deepeek的API网站https://platform.deepsee

SpringBoot实现二维码生成的详细步骤与完整代码

《SpringBoot实现二维码生成的详细步骤与完整代码》如今,二维码的应用场景非常广泛,从支付到信息分享,二维码都扮演着重要角色,SpringBoot是一个非常流行的Java基于Spring框架的微... 目录一、环境搭建二、创建 Spring Boot 项目三、引入二维码生成依赖四、编写二维码生成代码五

MyBatisX逆向工程的实现示例

《MyBatisX逆向工程的实现示例》本文主要介绍了MyBatisX逆向工程的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录逆向工程准备好数据库、表安装MyBATisX插件项目连接数据库引入依赖pom.XML生成实体类、