JS动态表格

最新推荐文章于 2024-01-03 08:59:12 发布

duodo

最新推荐文章于 2024-01-03 08:59:12 发布

阅读量103

点赞数 1

文章标签： J# HTML F#

本文链接：https://blog.csdn.net/duodo/article/details/83645083

版权

动态设置表格
方法一：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。
方法二：已用Html绘制表格，利用insertRow增加行，单元格的内容使用innerHTML属性进行填充。
方法三：已用Html绘制表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充。


<html>
  <head>
   <title>test page</title>
   <script type='text/javascript'>
     //<!--
		var content = new Array(
		["张三","经理"],
		["李四","财务"],
		["王五","人力"]
		);

	function createTable() {
    var data = new Array();

    data.push('<table border=1><tbody>');
	data.push('<tr><td>姓名</td><td>职位</td>');
		for (var i = 0; i < content.length; i++) {
			data.push('<tr>');
			for (var j = 0; j < content[i].length; j++) {
				data.push('<td>' + content[i][j] + '</td>');
			}
			data.push('</tr>');
		}
		data.push('</tbody><table>');
		document.getElementById('tableDiv1').innerHTML = data.join('');
   }

	function showFunctionRunTime(f) {
		var t1 = new Date();
		f();
		var t2 = new Date();
		alert(t2 - t1);
	}

   function addRow1(){
		for (var i = 0; i < content.length; i++) {
		 var row = document.getElementById('t2').insertRow();   
		 for(var j=0;j<content[i].length;j++){     
				 var col = row.insertCell();     
				 col.innerHTML = content[i][j]; 
			 }
		}
	}

	function addRow2() {
		var b = document.createElement('tbody');
		for (var i = 0; i < content.length; i++) {
			 var row = document.createElement('tr');   
			 for(var j=0;j<content[i].length;j++){
				var col = document.createElement('td');   
				col.innerHTML = content[i][j];

				 //var cont = document.createTextNode(content[i][j]);
				 //col.appendChild(cont); 

				row.appendChild(col);
			 }
			b.appendChild(row);
		}
		document.getElementById('t3').appendChild(b);
   }
     //-->
   </script>
  </head>
 <body>
	<div id="tableDiv1" style="border: 1px solid black">
	</div>
	<div id="tableDiv2" style="border: 1px solid black">
		<table id = 't2' border=1>
			<tr>
				<td>姓名</td>
				<td>职位</td>
			</tr>
		</table>
	</div>
	<div id="tableDiv3" style="border: 1px solid black">
		<table id = 't3' border=1>
			<tr>
				<td>姓名</td>
				<td>职位</td>
			</tr>
		</table>
	</div>
  <script>
   createTable();
   addRow1();
   addRow2();
  </script>
 </body>
</html>

duodo

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS动态表格

动态设置表格方法一：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。方法二：已用Html绘制表格，利用insertRow增加行，单元格的内容使用innerHTML属性进行填充。方法三：已用Html绘制表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充。[code="h...
复制链接

扫一扫