点击按钮实现表格tr的追加与删除

首先看下效果图

我们现在要实现点击绿色加号按钮在盒子中追加一行tr标签：

1，因为最后的加号tr要跟在上面查询出来的数据后面，所以我在网页一加载就把它append在盒子的最后面，具体代码如下：

$(".box-scrollbar table").append("<tr>\n" +
        "                                <td width=\"20%\">\n" +
        "                                    <input type=\"text\" placeholder='Zone'/>\n" +
        "                                </td>\n" +
        "                                <td width=\"75%\">\n" +
        "                                    <input type=\"text\" placeholder='Buletooth gateway ID' style=\"width: 100%\"/>\n" +
        "                                </td>\n" +
        "                                <td width=\"5%\">\n" +
        "                                    <span class=\"minus-icon\">\n" +
        "                                        <a href=\"javascript:void(0);\" onclick='appendTr();'><i class=\"fa fa-plus-circle \"></i></a>\n" +
        "                                    </span>\n" +
        "                                </td>\n" +
        "                            </tr>");

2，并在加号按钮添加上点击事件，添加事件有很多种方法，我这里就在标签上写onclick属性的方式了，具体看上面代码

3，之后就是点击事件方法的具体实现代码了，请看：

/*追加tr*/
function appendTr() {
    $(".box-scrollbar table .minus-icon i").attr("class","fa fa-minus-circle");
    $(".box-scrollbar table .minus-icon a").attr("onClick","removeTr(this)");
    $(".box-scrollbar table").append("<tr>\n" +
        "                                <td width=\"20%\">\n" +
        "                                    <input type=\"text\" placeholder='Zone'/>\n" +
        "                                </td>\n" +
        "                                <td width=\"75%\">\n" +
        "                                    <input type=\"text\" placeholder='Buletooth gateway ID' style=\"width: 100%\"/>\n" +
        "                                </td>\n" +
        "                                <td width=\"5%\">\n" +
        "                                    <span class=\"minus-icon\">\n" +
        "                                        <a href=\"javascript:void(0);\" onclick='appendTr();'><i class=\"fa fa-plus-circle \"></i></a>\n" +
        "                                    </span>\n" +
        "                                </td>\n" +
        "                            </tr>");

4，因为单机的是自己，要把自己的加号变成减号的按钮图标，所以得先写 ：$(".box-scrollbar table .minus-icon i").attr(“class”,“fa fa-minus-circle”);这行代码

5，之后就是在添加的tr后面的减号按钮添加移除事件了，如： $(".box-scrollbar table .minus-icon a").attr(“onClick”,“removeTr(this)”); 注意：这里我将this对象作为参数传递给方法上了，目的是为了更好的找到自己的父元素并移除整个父元素

6，移除方法具体实现代码如下：

/*消除tr*/
function removeTr(e) {
    if(confirm("您确定移除这条记录吗？")){
        $(e).parent().parent().parent().remove();
    }
}

ok，此次分享就到这里了，欢迎各位大神提出问题，我们一起进步
刚毕业工作的Java工程师，在此留下工作处理的问题与解决方式。。。。