点击创建表格

<style>
    #dv{
        width: 300px;
        height: 200px;
        border: 1px solid red;
    }
</style>
var arr=[
    {name:"百度",href:"http://www.baidu.com"},
    {name:"谷歌",href:"http://www.google.com"},
    {name:"淘宝",href:"http://www.tiaobao.com"},
    {name:"京东",href:"http://www.jd.com"}
];
//console.log(arr[3].href);
myTab("btn").onclick=function () {
    var table=document.createElement("table");
    table.border="1";
    table.cellSpacing="0";
    myTab("dv").appendChild(table);

    for(var i=0;i<arr.length;i++){
        //创建表行
        var tr=document.createElement("tr");
        //追加到父元素
        table.appendChild(tr);
        //创建td
        var td=document.createElement("td");
        tr.appendChild(td);
        //添加内容
        td.innerHTML=arr[i].name;

        //添加第二个Td
        var td2=document.createElement("td");
        tr.appendChild(td2);
        td2.innerHTML="<a href="+arr[i].href+">"+arr[i].name+"</a>"
    }

}

创建元素用ducument.creatElement();首先创建table标签,给table设置样式;然后把table追加到div里,用对象.appandChild();用同样的方法创建tr标签和td,最后给td添加内容,用innerHTML。

猜你喜欢

转载自blog.csdn.net/qq_43469418/article/details/86247737