javascript实现动态生成（页面元素）以表格为例

最新推荐文章于 2023-10-10 19:09:56 发布

原创最新推荐文章于 2023-10-10 19:09:56 发布 · 627 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #generator #table #html #border

JS、javascript相关专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用JavaScript动态创建HTML表格的例子。该表格通过脚本定义了结构，并设置了特定的颜色样式。每行每列都由代码生成，展示了基本的DOM操作技巧。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
   <script type="text/javascript">
	 var table = document.createElement("table");
	 table.setAttribute("border","1px");
	 table.setAttribute("width","500px");
	 table.setAttribute("borderColor","red");
	 table.setAttribute("height","500px");
	 table.setAttribute("cellSpacing","0");
	 var tbody = document.createElement("tbody");
	 document.body.appendChild(table);
	 table.appendChild(tbody);
	 //定义颜色数组
	 var arr = new Array("#0000FF","#808080","#800080")
	 for(i=0;i<3;i++){
		var tr = document.createElement("tr");
		tbody.appendChild(tr);
		for(j=0;j<3;j++){
			var td = document.createElement("td");
			td.setAttribute("bgColor",arr[i]);
			var text = document.createTextNode("aa");
			td.appendChild(text);
			tr.appendChild(td);
		}
	 }
	 
  </script>
 </body>
</html>