Javascript——元素动态创建表格反正也看不懂-优快云博客

本文链接：https://blog.youkuaiyun.com/mintsolace/article/details/95380739

本文详细介绍了如何使用JavaScript动态创建HTML表格，包括增删改查操作，适合初学者理解掌握。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <input type="button" value="创建列表" id="btn"/>
    <div id="dv"></div>
    <script>
        var names=["杨过","郭靖","张无忌","张三丰","乔峰"];
        //点击按钮动态创建列表，把列表加到div中
        document.getElementById("btn").onclick=function(){
            //创建ul，把ul立刻加入到父级元素div中
            var ulobj=document.createElement("ul");
            document.getElementById("dv").appendChild(ulobj);
            //动态创建li，加到ul中
            for(var i=0;i<names.length;i++){
                var liobj=document.createElement("li");
                //设置li中间的文字内容
                liobj.innerHTML=names[i];
                ulobj.appendChild(liobj);
                //为li添加鼠标离开事件
                liobj.onmouseover = mouseoverHandle;
                //为li添加鼠标离开事件
                liobj.onmouseout=mouseoutHandle;
            }
        };
        //此位置.按钮点击事件的外面
        function mouseoverHandle(){
            this.style.backgroundColor="red";
        }
        function mouseoutHandle(){
            this.style.backgroundColor="";
        }
    </script>
</body>

<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script>
var arr=[
    {name:"百度", href: "https://www.baidu.com/"},
    {name:"谷歌", href: "https://www.google.com/"},
    {name:"优快云", href: "https://www.youkuaiyun.com/"},
    {name:"GitHub", href: "https://github.com/"},
]
    //点击按钮创建表格
    document.getElementById("btn").onclick=function(){
        //创建table加入到div中
        var tableObj=document.createElement("table");
        	tableObj.border="1";
        	tableObj.cellPadding="0";
        	tableObj.cellSpacing="0";
        document.getElementById("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>