js基础

来源:互联网 发布:sql server insert语句 编辑:程序博客网 时间:2024/06/01 21:25

利用js创建表格并用for循环行和单元格

<script type="text/javascript">

//创建类Ss

     function Ss( arr){
         this.arr = arr;
    }

//利用原型法继承类并创建showinfo方法
    Ss.prototype.showinfo = function() {
            var tableEle = document.createElement("table");//创建一个表格
            tableEle.setAttribute("border","1");//设置表格属性
            for(var j = 0; j < 11; j++) {
                var f1RowEle = tableEle.insertRow(j);//创建表格中的一列
                var f1RowcellEle = f1RowEle.insertCell(0);//创建第一行的第一个单元格
                if (j == 0) {//循环行列
                    f1RowcellEle.appendChild(document.createTextNode("序号"));
                    document.body.appendChild(tableEle);
                } else {
                    f1RowcellEle.appendChild(document.createTextNode(j));
                    document.body.appendChild(tableEle);
                }
                var f1RowcellEle1 = f1RowEle.insertCell(1);
                f1RowcellEle1.appendChild(document.createTextNode(this.arr[j].name));
                var f1RowcellEle2 = f1RowEle.insertCell(2);
                f1RowcellEle2.appendChild(document.createTextNode(this.arr[j].age));
            }


        document.body.appendChild(tableEle);
    }

//用json扩散属性并将属性放入数组中
    var arr = [{name:"姓名",age:"年龄" },{name:"lili",age:"20"},{name:"nin",age:"15"},{name:"nn",age:"15"},{name:"kkn",age:"15"},{name:"noo",age:"15"},{name:"loo",age:"15"},{name:"ff",age:"15"},{name:"vv",age:"15"},{name:"dd",age:"15"},{name:"drdr",age:"15"}];
    var gt = new Ss(arr);
    gt.showinfo();


</script>


0 0
原创粉丝点击