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实现表格行的动态添加

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

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

*****************************************************************js动态添加表的列,并在列中添加控件的方法添加行function ad...
  • hongshan50
  • hongshan50
  • 2010年05月17日 11:10
  • 18424

js动态添加表(table、行).html

  • 2010年08月24日 12:17
  • 4KB
  • 下载

JavaScript实现动态添加页面的表格行数并获取数据

JavaScript实现动态添加页面的表格行数并获取数据,获取后的数据按照特殊的方式拼接存入数据库,用的时候再把它解析出来就行了。 车型 数量 ...
  • YEN_CSDN
  • YEN_CSDN
  • 2017年02月13日 18:04
  • 4048

js实现动态添加表格的行

js实现动态添加表格的行
  • qq_15536303
  • qq_15536303
  • 2016年08月07日 11:36
  • 752

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

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

js动态添加表格的行与列

//动态添加行与列 function addHtml( )         {     var tab=document.getElementById("viewTabs"); //获得表格 ...
  • Long_carol
  • Long_carol
  • 2012年03月15日 14:17
  • 12942

javascript 动态添加表格行

 javascript 动态添加表格行动态添加表格行 文/Ray表格部分代码如下:第一行第二行第三行动态添加表行的javascript函数如下:function addRow(){//添加一行var ...
  • ajaxchen_615
  • ajaxchen_615
  • 2009年09月01日 16:01
  • 5950

JavaScript实现动态添加表格中的行

  • 2009年03月27日 15:04
  • 851B
  • 下载

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

功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容。 点击增加行,在table的末尾增加一行;点击删除行,删除table中最末尾的一行。       ...
  • qqliang1314
  • qqliang1314
  • 2014年12月10日 20:18
  • 11810
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript动态添加/删除表格行
举报原因:
原因补充:

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