javascript动态创建table

最新推荐文章于 2023-03-21 17:56:29 发布

gaoshanwudi

最新推荐文章于 2023-03-21 17:56:29 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： table javascript xhtml border html

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CreateElement方法创建动态表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script>
   var table = document.createElement("table");
   table.setAttribute("border","1");
   table.setAttribute("width","100%");
   var tbody = document.createElement("tbody");
   table.appendChild(tbody);

   //创建第一行
   var tr1 = document.createElement("tr");
   var td1 = document.createElement("td");
   var td1_txt = document.createTextNode("Cell 1.1");
   td1.appendChild(td1_txt);
   tr1.appendChild(td1);

   var td2 = document.createElement("td");
   var td2_txt = document.createTextNode("Cell 2.1");
   td2.appendChild(td2_txt);
   tr1.appendChild(td2);

   //创建第二行
   var tr2 = document.createElement("tr");
   var td3 = document.createElement("td");
   var td3_txt = document.createTextNode("Cell 1.2");
   td3.appendChild(td3_txt);
   tr2.appendChild(td3);

   var td4 = document.createElement("td");
   var td4_txt = document.createTextNode("Cell 2.2");
   td4.appendChild(td4_txt);
   tr2.appendChild(td4);

   tbody.appendChild(tr1);
   tbody.appendChild(tr2);
   document.body.appendChild(table);
</script>
</body>
</html>

gaoshanwudi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript动态创建table

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> CreateElement方法创建动态表格 var table = document.createElement("table"); table.setAttribute("
复制链接

扫一扫

专栏目录