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 相关文章推荐
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
有关Promises异步问题详解
Nov 13 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
js实现石头剪刀布游戏
Oct 11 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
substr()函数中文版
2006/10/09 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
php递归实现无限分类的方法
2015/07/28 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
Python读取Excel的方法实例分析
2015/07/11 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
详解python中*号的用法
2019/10/21 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
中药专业大学生医药工作求职信
2013/10/25 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
英文邀请函
2015/02/02 职场文书
创业计划书之花店
2019/09/20 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python