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

相关文章

nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

《nginx-t、nginx-sstop和nginx-sreload命令的详细解析(结合应用场景)》本文解析Nginx的-t、-sstop、-sreload命令,分别用于配置语法检... 以下是关于 nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析,结合实际应

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过