案例：动态创建表格

最新推荐文章于 2024-05-03 16:01:29 发布

zhw13260525048

最新推荐文章于 2024-05-03 16:01:29 发布

阅读量145

点赞数

分类专栏：前端案例文章标签： JS 动态创建表格

本文链接：https://blog.csdn.net/zhw13260525048/article/details/83870211

版权

前端案例专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var arr=[
  {name:"百度",href:"http://www.baidu.com"},
  {name:"谷歌",href:"http://www.google.com"},
  {name:"优酷",href:"http://www.youku.com"},
  {name:"土豆",href:"http://www.tudou.com"},
  {name:"快播",href:"http://www.kuaibo.com"},
  {name:"爱奇艺",href:"http://www.aiqiyi.com"}
];
document.getElementById("btn").onclick=function () {
  var tableObj=document.createElement("table");
  tableObj.cellPadding="0";
  tableObj.border="1";
  tableObj.cellSpacing="0";
  document.getElementById("dv").appendChild(tableObj);
  for(var i=0;i<arr.length;i++) {
    var dt=arr[i];
    var trObj = document.createElement("tr");
    document.getElementsByTagName("table")[0].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);
  }
};



//  var arr=[
//    {name:"百度",href:"http://www.baidu.com"},
//    {name:"谷歌",href:"http://www.google.com"},
//    {name:"优酷",href:"http://www.youku.com"},
//    {name:"土豆",href:"http://www.tudou.com"},
//    {name:"快播",href:"http://www.kuaibo.com"},
//    {name:"爱奇艺",href:"http://www.aiqiyi.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>
</html>

zhw13260525048

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例：动态创建表格

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;title&lt;/title&gt; &lt;style&gt; div{ width: 200px; heig
复制链接

扫一扫

专栏目录