建立可以动态删除的表格

DOM操作练习
先在html中建立一个表格，如下
表格中有四列，其中第四列中的每个td元素里面有一个按钮，而每个按钮都绑定了删除操作，当点击删除的时候，需要把该按钮所在的整个tr删除，即删除所在行。

<table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>猪八戒</td>
            <td>18</td>
            <td> <input type="button" value="删除"> </td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪七戒</td>
            <td>19</td>
            <td> <input type="button" value="删除"> </td>
        </tr>
        <tr>
            <td>3</td>
            <td>猪六戒</td>
            <td>20</td>
            <td> <input type="button" value="删除"> </td>
        </tr>
        <tr>
            <td>4</td>
            <td>猪五戒</td>
            <td>21</td>
            <td> <input type="button" value="删除"> </td>
        </tr>
    </table>

接下来获取table中的tr节点和input节点，给每个input绑定点击事件，先用下面的方法

<script>
        var _tr = document.querySelectorAll("table tbody tr");
        var _inputs = document.querySelectorAll("table tbody tr td input");
        for(var index =0; index<_inputs.length;index++){

        	 _inputs[index].onclick = function(){
        	console.log(_tr[index]);
           	}
        }       
    </script>

使用此方法，会发现打印出来的_tr[index]是undefined，原因是在这个绑定的过程中，index一直在增加，最后index自增到_input.length并不在自增，要注意的是，点击的时候，是在循环之后点击的，而不是每循环一次点击一次，那在循环之后，即index自增到_input.length，这个时候打印_tr[index]出现的结果自然是因为超出了该数组的长度而出现undefined的结果，这个问题可以用以下方法解决。

 <script>
        var _tr = document.querySelectorAll("table tbody tr");
        var _inputs = document.querySelectorAll("table tbody tr td input");
        _inputs.forEach(function f(item,index){
            item.onclick =function g(){
            	//获取被点击的input的父元素td再获取父元素tr再获取父元素tbody，删除该父元素的相应子元素tr，达到删除的目的
                item.parentNode.parentNode.parentNode.removeChild(_tr[index+1]);
            }
        })
    </script>

在这里，f函数是外围函数，而g函数是嵌套函数，g定义在f内但执行时却是在全局执行，发生闭包，做到了保留每次循环的下标值。

达到预期效果。