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 相关文章推荐
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
使用js显示当前时间示例
Mar 02 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
node.js实现爬虫教程
Aug 25 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
javascript实现下拉菜单效果
Feb 09 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
php实现Mysql简易操作类
2015/10/11 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
英国网上花店:Bunches
2016/11/29 全球购物
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
学校万圣节活动方案
2014/02/13 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
2014年超市工作总结
2014/11/19 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书