创建一个学生信息表

创建一个学生信息表

实现根据姓名、ID、年龄输入框的值,
1)创建对应的表格;
2)点击删除按钮,删除对应的行;
1.首先我们先写一个表格的样式。


2.实现根据姓名、ID、年龄输入框的值,我们要写三个输入框给函数提供姓名、ID、年龄的值;

 ID:  //写出一个为ID的输入框
 Name://写出一个为Name的输入框
 age://写出一个为age的输入框
  //写出一个为添加的按钮并为它加上点击时间

在这里插入图片描述上面代码运行如上,
2.1创建对应的表格;并且点击删除按钮,删除对应的行

<script type="text/javascript">
        var t1 = document.getElementById("tex1");
        var t2 = document.getElementById("tex2");
        var t3 = document.getElementById("tex3");
        //创建表
        var tab = document.createElement('table');
        //创建标题为学生信息表
        tab.createCaption().innerHTML = "学生信息表";
        //创建表头
        var thead = tab.createTHead();
        //创建表头行
        var tr1 = thead.insertRow();
        //创建表头列并赋值ID,姓名,年龄,操作
        tr1.insertCell().innerHTML = "ID";
        tr1.insertCell().innerHTML = "姓名";
        tr1.insertCell().innerHTML = "年龄";
        tr1.insertCell().innerHTML = "操作";
        document.body.appendChild(tab);
        function loop() {
            var tb = tab.createTBody();
            //创建内容行
            var tr2 = tb.insertRow();
            //创建内容列并且获取input的ID,姓名,年龄的值
            tr2.insertCell().innerHTML = t1.value;
            tr2.insertCell().innerHTML = t2.value;
            tr2.insertCell().innerHTML = t3.value;
            //在列里加一个为删除的a标签并且添加一个点击事件
            tr2.insertCell().innerHTML = "删除";
            document.body.appendChild(tab);
        }
        //为a标签里的删除一行,服务的函数
        function del(obj) {
            var tr = obj.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
         }
    </script>

运行如下
创建一个学生信息表_第1张图片每输入一次ID,Name,age点击添加就会追加一行你输入的信息 实现删除行

注意:创建表格时的层层嵌套;注意添加点击时间时

tr2.insertCell().innerHTML = "删除";//中间的双引号是一对单引号是一对,不要范tr2.insertCell().innerHTML = "删除"这种错误;

注意函数名不能用关键字

你可能感兴趣的:(创建一个学生信息表)