学生信息展示与表格化-优快云博客

本文介绍了如何使用JavaScript创建一个学生信息展示系统，通过创建一个数组存储学生数据，并使用for循环遍历数组，将学生信息插入到HTML表格中。

一、文档碎片：document.createDocumentFragment()：把所有的新节点附加其上，然后把文档碎片的内容一次性加入document中；

二、cloneNode() : 复制节点，该方法带一个布尔参数值来指示在复制时是包含该节点的所有子节点（称为深度复制）

true为克隆元素里的所有东西，false只克隆元素，不克隆文本

三、table方法

deleteRow（position)——删除指定位置的行

insertRow（position）——在rows集合中的指定位置插入一个新行

deleteCell（position)——删除指定位置的单元格

insertCell（position）——在cells集合中的指定位置插入一个新的单元格

1.编写代码实现以下功能：
Student类，name属性、age属性、showInfo。
10个对象，存入数组。
使用for循环遍历数组。
把输入放入表格。
序号   姓名年龄
1        张   27
2        王   18
3        李   17

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"></script>
</head>
<body>

</body>
<script type="text/javascript">
    var a = [
        {name: "赵", age: "10"},
        {name: "钱", age: "12"},
        {name: "孙", age: "13"},
        {name: "李", age: "14"},
        {name: "周", age: "15"},
        {name: "吴", age: "16"},
        {name: "郑", age: "17"},
        {name: "王", age: "18"},
        {name: "冯", age: "19"},
        {name: "陈", age: "20"}]

    var tableEle = document.createElement("table");
    tableEle.setAttribute("border", "1");

    var _1RowEle = tableEle.insertRow(0);
    var _1Row1CellEle = _1RowEle.insertCell(0);
    _1Row1CellEle.appendChild(document.createTextNode("序号"));
    var _1Row2CellEle = _1RowEle.insertCell(1);
    _1Row2CellEle.appendChild(document.createTextNode("姓名"));
    var _1Row3CellEle = _1RowEle.insertCell(2);
    _1Row3CellEle.appendChild(document.createTextNode("年龄"));
    document.body.appendChild(tableEle)

    function Student(name, age, p) {
        this.name = name;
        this.age = age;
        this.p = p;

    }
    Student.prototype.showInfo = function () {
        var _1RowEle = tableEle.insertRow(this.p + 1);
        var _1Row1CellEle = _1RowEle.insertCell(0);
        _1Row1CellEle.appendChild(document.createTextNode(this.p + 1));
        var _1Row2CellEle = _1RowEle.insertCell(1);
        _1Row2CellEle.appendChild(document.createTextNode(this.name));
        var _1Row3CellEle = _1RowEle.insertCell(2);
        _1Row3CellEle.appendChild(document.createTextNode(this.age));
        document.body.appendChild(tableEle)
    }
    var p = 0;
    for (i = 0; i < 10; i++) {
        var stu = new Student(a[i].name, a[i].age, p)
        p++;
        stu.showInfo();
    }


</script>
</html>