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 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
开启BootStrap学习之旅
May 04 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 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
php4的session功能评述(三)
2006/10/09 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
jQuery入门知识简介
2010/03/04 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
javascript实现延时显示提示框效果
2017/06/01 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python Pygame的具体使用讲解
2017/11/03 Python
python3实现随机数
2018/06/25 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python如何基于redis实现ip代理池
2020/01/17 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
教师简历自我评价
2014/02/03 职场文书
个人授权委托书
2014/04/03 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
同意迁入证明模板
2014/10/26 职场文书
志愿者事迹材料
2014/12/26 职场文书