首页 > 编程语言> > Javascript——元素动态创建表格反正也看不懂

Javascript——元素动态创建表格反正也看不懂

2019-07-10 22:35:48 作者：互联网

<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var arr=[
    {name:"百度", href: "https://www.baidu.com/"},
    {name:"谷歌", href: "https://www.google.com/"},
    {name:"CSDN", href: "https://www.csdn.net/"},
    {name:"GitHub", href: "https://github.com/"},
]
    //点击按钮创建表格
    my$("btn").onclick=function(){
        //创建table加入到div中
        var tableObj=document.createElement("table");
        tableObj.border="1";
        tableObj.cellPadding="0";
        tableObj.cellSpacing="0";
        my$("dv").appendChild(tableObj);
        //创建行，把行加入到table中
        for(var i=0;i<arr.length;i++){
            var dt=arr[i];//每个对象
            var trObj=document.createElement("tr");
            tableObj.appendChild(trObj);
            //创建第一个列，加入到行中
            var td1=document.createElement("td");
            td1.innerText=dt.name;
            trObj.appendChild(td1);
            //创建第二个列
            var td2=document.createElement("td");
            td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
            trObj.appendChild(td2);
        }
    };
</script>
</body>

标签：www,创建表格,看不懂,Javascript,href,https,table,tableObj,name
来源： https://blog.csdn.net/mintsolace/article/details/95380739