用js来实现添加学生信息表

一准备工作

1.,两个lable,两个input,便于用户输入我们的姓名与年龄
2.一个button,用来添加点击事件
3.一个表格table,table中有一个表头thead,一个tbody
最终基本结构如代码所示:

<div>
        <label for="">用户名:</label>
        <input type="text" id="user">
        <label for="">年龄:</label>
        <input type="text" id="age">
        <button id="btn">添加</button>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="body">
            </tbody>
        </table>
    </div>

二.基本思路

构建好基本机构以后,我们来大致理顺一下我们的思路
1.给button定义一个点击事件,功能要求是点击button,在tbody中创建一行,并且在这一行中加入四个列
2.创建添加行的函数
3.创建添加列的函数
我们的大致思路就这么简单,接下来一步一步去实现吧!

三.实现功能

为了实现功能,我们由小到大来写代码
1.定义函数创建列
我们需要定义一个函数,他的功能就是可以创建一个列。
【分析】由于我们创建的这个列,有普通列,有特殊列,所以,我们可以用两个参数,来进行判断,是不是需要创建特殊列。

//创建列
        function createTd(islink, content) {
            var Td = document.createElement('td');
            //判断是不是添加链接列
            if (islink) {
                //创建链接
                var link = document.createElement('a');
                link.href = "javascript:void(0)";
                link.innerHTML = content;
                //把链接加入列
                Td.appendChild(link);
                //点击链接,删除行
                link.onclick = function () {
                    if (confirm('确认删除?')) {
                        var myTr=this.parentNode.parentNode;
                        myTr.parentNode.removeChild(myTr);
                    }
                }
            } else {
                Td.innerHTML = content;
            }
            return Td;
        }

【分析】考虑到有特殊列的生成,我们设定两个参数,第一个参数islink用来判断是否是特殊列,第二个参数是内容,在函数中判定如果是特殊列,先创建一个a,将content赋值到a的内容中,把这个a加入到我们创建的td中,如果不是特殊列,就直接将内容赋值给td的内容;
2.定义函数创建行
定义一个函数,创建一个行,在这个行中创建四个列,并将列加入到这个行中,调用1步骤中的函数;
代码如下所示:

//创建行
         function createTr(id,name,age) {
            var Tr = document.createElement('tr');
            //创建列
            var Td1=createTd(false,id);
            var Td2 = createTd(false, name);
            var Td3 = createTd(false, age);
            var Td4 = createTd(true, '删除');
            //把列加入行中
            Tr.appendChild(Td1);
            Tr.appendChild(Td2);
            Tr.appendChild(Td3);
            Tr.appendChild(Td4);
            return Tr;
        }

【分析】首先我们需要创建一个行tr,然后调用创建列的函数,创建四个列,其中前三个为正常列,第四个为特殊列,最后将创建的列加入到我们创建的行当中,返回我们创建的这个行;
3.给button建立点击事件
在点击事件中,调用创建行的函数,达成效果点击一次,创建一行;
【分析】
1).由于我们的输入框,姓名和年龄两栏,比如都有值才能将信息添加到列内,所有我们要判断姓名输入框和年龄输入框的值是否为空字符串,而且一般来说我们的姓名不是数字类型,而年龄都是数字类型,所有需要判断一下姓名和年龄输入框的值是不是数字;
2).当我们每点击一次,执行一遍函数,添加一行,需要将我们的姓名输入框和年龄输入框清空,以便于用户输入下一组数据
3).我们的第一列的内容是根据我们的行数来进行变化的,为了使内容的编号随着我们的行数的变化而变化,我们需要设定一个,使得每调用一次函数即每增加一行,我们的编号就加一,这样就实现了编号随着行数的变化来变化了。这样的好处是,即使我们删除了某一行,接下来添加将会编码延续增加,不会重置,给已删除的行留有空间;

btn.onclick = function () { 
            if (user.value == '' || Age.value == '') {
                alert('您的输入有误,请重新输入');
                return;
            }
            var n = Number(user.value);
            var h=Number(Age.value);
            if(!isNaN(n)||isNaN(h)){
                alert('您的输入有误,请重新输入');
                return;
            }
            var Tr=createTr(i,user.value,Age.value);
            Body.appendChild(Tr);
            //编码根据点击行数增加
            i++;
            user.value='';
            Age.value='';
        }

注意:
在调用函数的最开始,我们需要先找到html中对应的id并重新来定义;

var btn = document.getElementById('btn');
        var Body = document.getElementById('body');
        var user = document.getElementById('user');
        var Age = document.getElementById('age');
        var i=0;

最终效果:
输入信息,点击添加,将信息加入重新创建的行中,可以实现删除效果。
用js来实现添加学生信息表_第1张图片

四.总结

通过写这个案例,在这个案例中主要练习了DOM中节点的创建,添加,调用等知识,让我对节点的增删改查有了很深刻的了解。

你可能感兴趣的:(web,javascript,前端)