用javascript语言循环输出表格

最新推荐文章于 2021-06-05 08:39:44 发布

sunshine_hl

最新推荐文章于 2021-06-05 08:39:44 发布

阅读量3.7k

点赞数 1

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/sunshine_hl/article/details/47626863

版权

web前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /**
         * 学生对象
         */
        function Student(name, age) {
            this.name = name;
            this.age = age;
        }
        Student.prototype.showInfo = function(tableEle, i) {
            if (tableEle instanceof HTMLTableElement && (typeof i) === "number") {
                var row = tableEle.insertRow(i + 1);
                var cellfirst = row.insertCell(0);
                var cellsecond = row.insertCell(1);
                var cellthird = row.insertCell(2);
                cellfirst.appendChild(document.createTextNode(i + 1));
                cellsecond.appendChild(document.createTextNode(this.name));
                cellthird.appendChild(document.createTextNode(this.age));
            }
        }
    </script>
</head>
<body>

</body>
<script type="text/javascript">
    var stu1 = new Student("刘兴", 15);
    var stu2 = new Student("张绍强", 16);
    var stu3 = new Student("王超", 18);

    var students = [stu1, stu2, stu3];

    var tableEle = document.createElement("table");
    var _1TrEle = tableEle.insertRow(0);
    var _1Tr_1CellEle = _1TrEle.insertCell(0);
    var _1Tr_2CellEle = _1TrEle.insertCell(1);
    var _1Tr_3CellEle = _1TrEle.insertCell(2);
    _1Tr_1CellEle.appendChild(document.createTextNode("序号"));
    _1Tr_2CellEle.appendChild(document.createTextNode("姓名"));
    _1Tr_3CellEle.appendChild(document.createTextNode("年龄"));

    for (var i = 0; i < students.length; i++) {
        students[i].showInfo(tableEle, i);
    }

    tableEle.setAttribute("border", 1);
    tableEle.setAttribute("style", "text-align: center");
    document["body"].appendChild(tableEle);

    alert((null == undefined) + "  " + (null === undefined));
    alert((1 == "1") + "  " + (1 === "1"));
</script>
</html>