动态生成表格_creattable与function-优快云博客

本文介绍了三种不同的使用JavaScript生成HTML表格的方法。第一种方法利用jQuery来动态创建和填充表格，第二种方法通过字符串拼接的方式生成表格内容，第三种方法展示了如何根据数据对象生成带有表头的表格。

一.方法一

function CreateTable() {
			var table = $("<table>");
			table.appendTo($('body'));
			for(var i = 0; i < 10; i++) {
				var tr = $("<tr></tr>");
				tr.appendTo(table);
				for(var j=0;j<10;j++ ) {
					var td = $("<td>" + i*j + "</td>");
					td.appendTo(tr);
				}
			}
			$('body').append("</table>");
		}
		CreateTable();

二.方法2

function creatTable () {
		for (var i =0;i <10;i++) {
			td='';
			for (var j =0;j<8 ;j++) {
				td+='<td>'+(i+'-'+j)+'</td>';
			}
			tr +='<tr>'+td+'</tr>';
		}
		
		var str = thead+tr+tfooter;
		return str;
	};
	$('#p').html(creatTable ());

三.方法3

var data = {
			first: {
				
				'id': 99,
				'name': 'zhangsan',
				'age': 19,
				'sex': 'nan'
			}	
		}
function creatTable(data) {
			var thead = '<table class="layui-table">\
			<colgroup>\
				<col width="150">\
				<col width="200">\
				<col>\
			</colgroup>\
			<thead>\
				<tr>\
					<th>id</th>\
					<th>姓名</th>\
					<th>年龄</th>\
					<th>性别</th>\
				</tr>\
			</thead><tbody>';
			var tfooter = '</tbody></table>';
			var tr = '',
				td = '';
			for(var i in data) {
				td = '';
				for(var j in data[i]) {
					td += '<td>' + data[i][j] + '</td>';
				}
				tr += '<tr>' + td + '</tr>';
			}

			var str = thead + tr + tfooter;
			return str;
		}
		$('#p').html(creatTable(data));