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 相关文章推荐
javascript实现的动态文字变换
Jul 28 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
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中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
layui的select联动实现代码
2019/09/28 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
把pandas转换int型为str型的方法
2019/01/29 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
女大学生自我鉴定
2013/12/09 职场文书
致全体运动员广播稿
2014/02/01 职场文书
岗位说明书范文
2014/05/07 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技