jsp动态生成table

最新推荐文章于 2024-05-13 01:52:35 发布

石大菜鸟

最新推荐文章于 2024-05-13 01:52:35 发布

阅读量4.4k

点赞数 1

文章标签： DOM 解析html

本文链接：https://blog.csdn.net/u010675319/article/details/38046043

版权

<script type="text/javascript">
  	function generate(){
  		var line = document.getElementById("line").value;//获取行数
  		var row = document.getElementById("row").value;//获取列数
  		
  		var div = document.getElementById("tab");//获取到存放生成table的div
  		var table = document.createElement("TABLE");//创建table元素
  		
  		for(var i=0;i<line;i++){//循环创建单元格，并填充内容
  			var tr = document.createElement("TR");
  			for(var j=0;j<row;j++){
  				var td = document.createElement("TD");
  				var tdText = document.createTextNode(row * i + j + 1);
  				td.appendChild(tdText);
  				tr.appendChild(td);
  			}
  			table.appendChild(tr);
  		}
  		table.setAttribute("border", "1");//设置表框属性
  		div.appendChild(table);//将创建的table附加到div中
  	}
  </script>
  <body>
   	行：<input type="text" name="line" id="line">
   	列：<input type="text" name="row" id="row">
   	<input type="button" value="生成表格" οnclick="generate()">
   	<div id="tab">
   	</div>
  </body>

页面结果

石大菜鸟

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jsp动态生成table

function generate(){ var line = document.getElementById("line").value;//获取行数 var row = document.getElementById("row").value;//获取列数 var div = document.getElementById("tab");//获取到存放生成ta
复制链接

扫一扫