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 位置插件
Dec 25 Javascript
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JS实现的几个常用算法
Nov 12 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
vue弹出框组件封装实例代码
Oct 31 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
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
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
javascript获取网页宽高方法汇总
2015/07/19 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
简单实现Python爬取网络图片
2018/04/01 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
python 实现多维数组转向量
2019/11/30 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
老师给学生的表扬信
2014/01/17 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
职务任命书范本
2014/06/05 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
python 如何用terminal输入参数
2021/05/25 Python
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python