JQuery实现动态表格点击按钮表格增加一行


Posted in Javascript onAugust 24, 2014

功能实现:点击添加按钮,表格增加一行并给其name属性赋予的值,方便获取

点击删除,自动删除这一行

JQuery中定义一个count变量

var count = 1;
function add() {
var tbl = document.all.ci;
var rows = tbl.rows.length;
var tr = tbl.insertRow(rows);

var e_id = tr.insertCell(0);
e_id.innerHTML = '<input type="text" name="e_id' + count + '" size="7" />';

var class_id = tr.insertCell(1);
class_id.innerHTML = '';

var memo = tr.insertCell(2);
memo.innerHTML = '<input type="text" name="memo' + count + '" size="14" />';

var del = tr.insertCell(3);
del.innerHTML = '<input type="button" onclick="del(this)" value="删除" />';
count++;
}

function del(btn) {
var tr = btn.parentElement.parentElement;
var tbl = tr.parentElement;
if (tr.rowIndex >= 1) {
tbl.deleteRow(tr.rowIndex);
} else {

}
};
Javascript 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
Angular表单验证实例详解
Oct 20 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 #Javascript
控制台报错object is not a function的解决方法
Aug 24 #Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 #Javascript
JavaScript验证电子邮箱的函数
Aug 22 #Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 #Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 #Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 #Javascript
You might like
php方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
python简单商城购物车实例代码
2018/03/15 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python如何telnet到网络设备
2021/02/18 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
学期自我鉴定范文
2013/10/01 职场文书
学生学习总结的自我评价
2013/10/22 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
边城读书笔记
2015/06/29 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书