用js实现增加一行、删除一行，添加序号，而且在点击删除之后序号自

在这周中又学习到了这个一个js特效，所以想写下来一起分享一下；

先想要明白这个思路，其实我也是不怎么明白这些的，所以想写一下这些思路，好让自己理解一下；

第一个特效：点击添加按钮就会自动添加一行；

第二个特效：点击删除按钮就会对应的删除这一行；

第三个特效：点击添加一行之后这行对应前面的序号是有序的排列的，在点击删除之后序号也会对应的改变，一直都是按序号排列。

大概就是这样子的思路了，现在开始html中的代码细节，

完成form表单之后，不想写那么多css样式的话，可以直接用bootstrap.css这个文件的样式，还可以自动适应浏览器；

我在下边放了我这次做的网页的代码

1：html中的代码

这个html页面中的代码

2:下面的js代码是实现特效的功能

//这个主要是点击添加按钮的时候就添加一行

function add_jietu()                         //定义一个方法，名为add_jietu

{

      var add_jietu = document.getElementById('add_jietu');                            //简化代码，把id名赋值给等号前面的名称中

       var nodeFather = add_jietu.parentNode;       //获取add_jietu中父节点并赋值到nodeFather

        var node_clone = add_jietu.cloneNode();     //获取add_jietu中使用cloneNode()中方法克隆所有属性以及它们的值

       content = add_jietu.innerHTML;      //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML

        node_clone.removeAttribute('id');      //removeAttribute() 方法删除指定的属性

       node_clone.innerHTML = content;      //

        nodeFather.appendChild(node_clone);   //appendChild() 方法向节点添加最后一个子节点

        numCheck();     //执行下下个方法的

}

//这个主要是点击删除按钮的时候，就删除一行

function deleteRow(r)

{

     var i=r.parentNode.parentNode.rowIndex;      //定义一个变量i，值为r的父节点的父节点所在的一行。即是你这里的tr；rowIndex返回某一行在表格的行集合中的位置,parentNode是父节点。

    if(i>1){

               document.getElementById('myTable').deleteRow(i);参数 i 指定了要删除的行在表中的位置。

      }else{

             alert("不能删除第一行");

      }

      numCheck();//执行下个方法的

}

//这个主要是判断在点击删除之后，序号还是会自动改成的按排序的序号

function numCheck(){

        var num = $("#bbsTab tr").length;     //获取tr的长度

        for (var i = 0; i <= num; i++) {         //进行循环

        $("#bbsTab tr .td_center").eq(i).html(i+1);

    };

}