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 相关文章推荐
jquery实现更改表格行顺序示例
Apr 30 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
简单谈谈json跨域
Mar 13 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
vue的diff算法知识点总结
Mar 29 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
js基于canvas实现时钟组件
Feb 07 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/03/08 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
新手简单了解vue
2019/05/29 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python numpy格式化打印的实例
2018/05/14 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python解释器spython使用及原理解析
2019/08/24 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
高中三年学习生活的自我评价
2013/10/10 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
小学生作文批改评语
2014/12/25 职场文书
用Python实现屏幕截图详解
2022/01/22 Python