JavaScript动态添加/删除表格行

跟着廖雪峰的 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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sqq0103/article/details/53698482
文章标签: javascript dom
个人分类: 软件工程
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭