jQuery动态添加与删除tr行实例代码


Posted in Javascript onOctober 18, 2016

这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子

下面是实现的样子,当然没有样式:

jQuery动态添加与删除tr行实例代码

点击添加按钮可以添加一行:

jQuery动态添加与删除tr行实例代码

点击删除可以删除本行:

jQuery动态添加与删除tr行实例代码

基本功能是这样,下面是代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<!-- 这里是引用了一个百度的jquery库,可换为本地jquery库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
</head>
<body>
 
<table id="allDatas">
<tr>
<th>选择图片</th>
<th>图片名称</th>
<th>描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="file" name="imageFile1"/></td>
<td><input name="imageName"></input></td>
<td><input name="note" /> </td>
<td><a href="javascript:;" onclick="deleteCurrentRow(this);"><font color='red'>删除</font></a> </td>
</tr>
</table>
<button onclick="javascript:addCurrentRow();" >添加</button>
 
<script>
function addCurrentRow()
{
var trcomp="<tr><td><input type='file' name='imageFile'/></td><td><input name='imageName'></input></td><td><input name='note' /></td><td><a href='javascript:;' onclick='deleteCurrentRow(this);'><font color='red'>删除</font></a></td></tr>";
$("#allDatas tr:last-child").after(trcomp);
}
 
function deleteCurrentRow(obj)
{
var isDelete=confirm("真的要删除吗?");
if(isDelete)
{
var tr=obj.parentNode.parentNode;
var tbody=tr.parentNode;
tbody.removeChild(tr);
}
}
</script>
</body>
</html>

总结

以上就是jQuery动态添加与删除tr行的全部内容,希望本文的内容对大家的学习或者工作能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
ionic实现底部分享功能
May 11 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 #Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 #Javascript
vue.js表格分页示例
Oct 18 #Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 #Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 #Javascript
微信小程序 教程之WXSS
Oct 18 #Javascript
微信小程序 教程之引用
Oct 18 #Javascript
You might like
PHP 身份证号验证函数
2009/05/07 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
王纯业的Python学习笔记 下载
2007/02/10 Python
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python使用fork实现守护进程的方法
2017/11/16 Python
基于python log取对数详解
2018/06/08 Python
有关Python的22个编程技巧
2018/08/29 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
python如何导入依赖包
2020/07/13 Python
scrapy头部修改的方法详解
2020/12/06 Python
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
会计学生自我鉴定
2014/02/06 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers