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 相关文章推荐
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
js实现动态显示时间效果
Mar 06 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 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计算多维数组中所有值总和的方法
2015/06/24 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
jscript之List Excel Color Values
2007/06/13 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue3.0 上手体验
2020/09/21 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
Python多进程机制实例详解
2015/07/02 Python
python数组过滤实现方法
2015/07/27 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Python从零开始创建区块链
2018/03/06 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Python更新所有已安装包的操作
2020/02/13 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
田径运动会广播稿
2015/08/19 职场文书
二年级数学教学反思
2016/02/16 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python