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 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
删除节点的jquery代码
Jan 13 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 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中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php简单判断文本编码的方法
2015/07/30 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
DOM 基本方法
2009/07/18 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
基于vue--key值的特殊用处详解
2020/07/31 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
python实现的简单抽奖系统实例
2015/05/22 Python
解析Python编程中的包结构
2015/10/25 Python
Sublime开发python程序的示例代码
2018/01/24 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python接入支付宝的实例操作
2020/07/20 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
销售文员岗位职责
2013/11/29 职场文书
师德师风自查材料
2014/10/14 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
思想道德自我评价2015
2015/03/09 职场文书
社区党支部公开承诺书
2015/04/29 职场文书