用js做一个可以添加和删除的表格

首先是html部分

<div>
        <label for="">用户名：</label>
        <input type="text" id="txt1">
        <label for="">年龄：</label>
        <input type="text" id="txt2">
        <button id="btn" onclick="times()" >添加</button>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="box">
            </tbody>
        </table>
    </div>

这个很简单大家都一眼看得懂！我就不做过多的解释了。
下面对我们的表格简单的布一下样式
代码如下：

<style>
        div {
            text-align: center;
        }

        table {
            width: 640px;
            border: 1px solid gray;
            border-collapse: collapse;
            margin: 50px auto;
        }

        thead tr {
            background: #ccc;
        }

        th,
        td {
            width: 160px;
            line-height: 35px;
            border: 1px solid gray;
            text-align: center;
        }
    </style>

css样式也是写的很简单，就简单的布一下样式，我们先运行一下看看是什么样子的!看着还行就好，重点是js部分，我们需要实现把用户输入的用户名和年龄添加到下边的表格中。但是下面的表格也并没用，这就需要我们在点击的时候自动生成表格，并把用户名和年龄添加进去。
代码如下：
我一步一步解释各部分的功能

<script>
        var txt1 = document.getElementById('txt1');  //找到用户输入的文本框；
        var txt2 = document.getElementById('txt2');   
        var btn = document.getElementById('btn');  //获取点击按钮；
        var box = document.getElementById('box'); //获取要添加的表格的地方；
        var n=0;
        btn.onclick = function () {        //创建一个点击事件
            n++;              //这个是计算按钮点击次数的，为了输出添加的编号； 
            var txt_1 = txt1.value;  //获取用户输入的用户名；
            var txt_2 = txt2.value;  //获取用户输入的年龄；
            //下面的if语句是为了让用户名和年龄都有内容才能添加，否则不添加；
            if ((txt_1 != '') && (txt_2 != '') && (txt_1 != ' ') && (txt_2 != ' ')) {
                var oTr = document.createElement("tr");//创建一个行（tr）
                var oTd0 = document.createElement('td');//创建一列（td）
                var oTd1 = document.createElement('td');//创建一列（td）
                var oTd2 = document.createElement('td');//创建一列（td）
                var oTd3 = document.createElement('td');//创建一列（td）
                var A = document.createElement('a');//创建一个行元素（a）
                oTd3.appendChild(A);//把超链接放到最后一个列中；
                oTr.appendChild(oTd0)//把创建的列放到行中；
                oTr.appendChild(oTd1);//把创建的列放到行中；
                oTr.appendChild(oTd2);//把创建的列放到行中；
                oTr.appendChild(oTd3)//把创建的列放到行中；
                box.appendChild(oTr);//把创建的表格放到我们需要放的地方；
                A.href = "javascript:viod(0)" //把这个行元素变为超链接；
                A.innerHTML = '删除'; //为超链接里加入删除内容；
                //下面我们可以根据我们创建的删除键来计算每一行表格的位置；
                //并把我们获取的用户输入的内容添加到固定的位置；
                for (var i = 0; i < document.links.length; i++) {  
                    //console.log(document.links[i]);
                    var I = 0;
                    I = i;
                }      //document.links.length可以得到我们创建的超链接的个数；
                var Ab = document.links[I];//得到每一个超链接在的行数；
                var td_1 = Ab.parentNode.previousSibling;
                var td_2 = td_1.previousSibling;
                var td_3 = td_2.previousSibling;
                //console.log(td_1,td_2);
                td_1.innerHTML = txt_2;
                td_2.innerHTML = txt_1;
                td_3.innerHTML = n;
                 //上面的代码就能准确的将我们得到的用户名，年龄和编号放到合适的位置；
                 //下面是当我们点删除的时候能够删除我们输入的内容 同时删除这一行表格；
                for (var a = 0; a < document.links.length; a++) {
                    var Aa = document.links[a];
                    Aa.onclick = function () {
                        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                    }
                }
            }
        }
    </script>

到这里我们的代码就编写完毕了；
可以先看看运行后的效果：

当我们把编号3和编号5删除以后：

然后再继续点击添加：

编号从6开始添加，前面我们虽然删除了3 和5，但是编号3和5已被占用。

---------------------------------------ennnnnn…结束-------------------------------------------