JavaScript动态添加/删除表格行

原创 2016年12月16日 22:23:12

跟着廖雪峰的 JS教程 初步学习了一下JavaScript,看到 DOM操作 部分的时候,想着找个小例子实践,恰好项目页面对表格的操作较多,需要解决简单的 table行动态增删 的问题。
于是在此回顾记录一下如何使用原生JavaScript来解决该问题。


以项目页面中一个简单的表格为例:

表格

如果想要通过点击左下角+按钮达到增加一行的效果:

表格增行

应该怎样处理呢?

基本思路就是点击一下按钮触发click事件,将添加表格行的函数绑定到该事件即可,具体来看添加表格行的函数:

对table进行操作之前,需要先拿到table body的DOM节点,这里可以采用两种方法,通过id直接定位:document.getElementById(),或者使用document.querySelector(),具体用法请参考 廖雪峰的教程

然后,增加新的一行相当于在原有的DOM树上增加一个<tr>节点,需要先创建一个<tr>节点再添加到<tbody>节点的末尾,创建一个新节点用到的方法是document.creatElement(),插入则可以用appendChild()方法,如果要插入到指定位置,可以使用insertBefore()等;

由于表格的每一行都由若干个单元格组成,所以对于新建的<tr>节点,应该为它添加上若干个<td>节点;

此外,对于每个<td>节点来说,还可以设定它的HTML属性,可使用element.setAttribute()方法,该方法有两个参数,第一个是属性名,第二个是对应的value值,如果要设置class属性,则需要使用element.classList.add()或者element.classList.remove()

由于删除表格行的按钮应该是在添加了新行之后才有的,所以直接在生成的按钮上添加一个点击事件的监听即可:

delBtn.addEventListener('click', function(){
    tb.removeChild(tr);
});

以上都可以参考MDN上的相关介绍 DOM接口,也可以看看W3School上的 教程

完整的代码如下:

$("button#addBtn").click(function(){
    var submitBtn = document.getElementById('submitBtn');
    submitBtn.classList.remove('hidden');
    var tb = document.querySelector('#simpleTable > tbody');
    var tr = document.createElement('tr');
    var tdInfo = document.createElement('td');
    var inputInfo = document.createElement('input');
    inputInfo.setAttribute('type', 'text');
    inputInfo.setAttribute('name', 'details');
    inputInfo.setAttribute('placeholder', '项目信息');
    inputInfo.setAttribute('required', 'required');
    inputInfo.classList.add('col-xs-12');
    tdInfo.appendChild(inputInfo);

    var tdAmount = document.createElement('td');
    var inputAmount = document.createElement('input');
    inputAmount.setAttribute('type', 'text');
    inputAmount.setAttribute('name', 'amounts');
    inputAmount.setAttribute('placeholder', '项目金额');
    inputAmount.setAttribute('required', 'required');
    inputAmount.classList.add('col-xs-12');
    tdAmount.appendChild(inputAmount);

    var tdOp = document.createElement('td');
    var delBtn = document.createElement('button');
    delBtn.setAttribute('type', 'button');
    delBtn.setAttribute('title', '删除');
    delBtn.classList.add('btn');
    delBtn.classList.add('btn-xs');
    delBtn.classList.add('btn-danger');
    delBtn.innerHTML = '<i class="ace-icon fa fa-trash-o"></i>';
    delBtn.addEventListener('click', function(){
        tb.removeChild(tr);
    });
    tdOp.appendChild(delBtn);

    tr.appendChild(tdInfo);
    tr.appendChild(tdAmount);
    tr.appendChild(tdOp);

    tb.appendChild(tr);     
});

最后安利一下我们小组做的AA收款项目的小网站 LETS GO DUTCH
github地址:https://github.com/wuwujun/lets-go-dutch

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Js删除table内的某一行

转载文章: http://blog.sina.com.cn/s/blog_69398ed9010163kb.html十分有用的例子,感谢原作者! 1 //得到行对象 function getRow...

Html+js实现表格可编辑,并能动态添加删除行

功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容。 点击增加行,在table的末尾增加一行;点击删除行,删除table中最末尾的一行。       ...

js实现动态删除表格行和列

记录了动态添加表格的一行,当然这个一行是指一行数据,也就是说一行多少列也是加上的,并且第几列的内容都可以添加上,先来回顾下它的实现的关键点: 1、var row=table.insertRow(...

js 对表格的动态操作(动态添加行,删除该行,在指定位置添加控件)

***************************************************************** js动态添加表的列,并在列中添加控件的方法 添加行 func...
  • judyge
  • judyge
  • 2015年12月13日 13:44
  • 1353

js实现表格行的动态添加

现代页面通常都是用div+css来进行设计,几乎很少再有用table来进行布局的了,但是这并不意味着table的重要性就降低了,事实上,table在数据处理上有着它独特的优势,所以对table的掌握还...

动态添加删除table页面一行input表格

之前写过两篇关于HTML页面添加结点,删除结点的博文。今天偶然看到一个网友询问JSP页面上动态给表格增加行,删除行,碰巧那会儿比较闲,就动手写了一下,记录下来,希望能帮到需要的朋友们。 上面的代码中...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

动态添加修改删除html表格内容

1.需求需要实现收银台上添加修改删除商品信息时顾显可以实时看到其变化2.解决收银台和顾显通过tcp传输进行数据通信,顾显通过操作html中的表格进行数据添加修改和删除操作3.代码mytest.html...

如何给自己的网站添加小图标

网站小图标就像LOGO一样可以为你的网站增色不少!这个小图标是显示在浏览器地址栏以及收藏夹里,现在无论是从制作、上传到最后的显示都十分简单。但是,可能还有一些网友不知道这个究竟是怎么搞出来的!尤其对于...

CentOS7 mini的安装和静态ip设置

![###centos 7 变化很多 首先安装过程中,操作变化方式很大,mini安装也没有了base这个选项,也就导致很多在centos6里面的命令在7中没有办法使用。 再就是,非...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript动态添加/删除表格行
举报原因:
原因补充:

(最多只允许输入30个字)