这是一个比较简单的问题。有两种实现思路：拼接html字符串；操作DOM元素。分别介绍如下。
拼接html字符串
这可能是大多数人能快速实现的方法，因为不需要查看JavaScript操作DOM的API。对元素的innerHTML属性进行赋值，可以改变元素的内容。
下面的例子中，点击按钮，就会将js数组中的元素拼接成html的tr元素，添加到table中。
<html>
<head>
<title>test html sort</title>
</head>
<body>
<h1>test click</h1>
<button onclick="display_table();">DISPLAY_TABLE<button>
<table id="table_area" border="1">
</table>
</body>
<script>
var data = [
{a:11,b:2,c:3},
{a:12,b:2,c:3},
{a:13,b:2,c:3},
{a:14,b:2,c:3},
{a:15,b:2,c:3},
{a:16,b:2,c:3},
{a:17,b:2,c:3},
{a:18,b:2,c:3},
{a:19,b:2,c:3}
];
function create_tr(a){
return '<tr><td>'+a["a"]+'</td><td>' + a["b"] + '</td><td>' + a["c"]+'</td></tr>';
}
function create_table_content(arr){
var content_html = '';
for(var i = 0;i<arr.length;i++){
content_html += create_tr(arr[i]) + '\n';
}
return content_html;
}
function display_table(){
document.getElementById("table_area").innerHTML = create_table_content(data);
}
</script>
</html>
操作DOM元素
通过JavaScript的DOM API可以操作DOM树，如下代码：
<html>
<head>
<title>test html sort</title>
</head>
<body>
<h1>test click</h1>
<button onclick="display_table();">DISPLAY_TABLE<button>
<table id="table_area" border="1">
</table>
</body>
<script>
var data = [
{a:11,b:2,c:3},
{a:12,b:2,c:3},
{a:13,b:2,c:3},
{a:14,b:2,c:3},
{a:15,b:2,c:3},
{a:16,b:2,c:3},
{a:17,b:2,c:3},
{a:18,b:2,c:3},
{a:19,b:2,c:3}
];
function create_tr_e(a){
var tr_e = document.createElement("tr");
var td_e = document.createElement("td"); td_e.appendChild(document.createTextNode(a["a"])); tr_e.appendChild(td_e);
td_e = document.createElement("td"); td_e.appendChild(document.createTextNode(a["b"])); tr_e.appendChild(td_e);
td_e = document.createElement("td"); td_e.appendChild(document.createTextNode(a["c"])); tr_e.appendChild(td_e);
return tr_e;
}
function display_table(){
var table_e = document.getElementById("table_area");
for(var i = 0;i<data.length;i++){
table_e.appendChild(create_tr_e(data[i]));
}
}
</script>
</html>
目前这个实现有一个问题，多次点击按钮会一直向表格中添加数据行。为了修正这个问题，将新的元素添加到表格的时候，最好将前面的删掉。这里用到replaceChild方法，不过这个方法用的时候，有一个小trick(要通过parentNode调用)如下：
<html>
<head>
<title>test html sort</title>
</head>
<body>
<h1>test click</h1>
<button onclick="display_table();">DISPLAY_TABLE<button>
<table id="table_area" border="1">
</table>
</body>
<script>
var data = [
{a:11,b:2,c:3},
{a:12,b:2,c:3},
{a:13,b:2,c:3},
{a:14,b:2,c:3},
{a:15,b:2,c:3},
{a:16,b:2,c:3},
{a:17,b:2,c:3},
{a:18,b:2,c:3},
{a:19,b:2,c:3}
];
function create_tr_e(a){
var tr_e = document.createElement("tr");
var td_e = document.createElement("td"); td_e.appendChild(document.createTextNode(a["a"])); tr_e.appendChild(td_e);
td_e = document.createElement("td"); td_e.appendChild(document.createTextNode(a["b"])); tr_e.appendChild(td_e);
td_e = document.createElement("td"); td_e.appendChild(document.createTextNode(a["c"])); tr_e.appendChild(td_e);
return tr_e;
}
function display_table(){
var table_e = document.getElementById("table_area");
var temp_table = document.createElement("table");
for(var i = 0;i<data.length;i++){
temp_table.appendChild(create_tr_e(data[i]));
}
table_e.parentNode.replaceChild(temp_table, table_e);//trick
}
</script>
</html>
总结
这两种方法都可以实现，但是在用第一种方法的时候，在IE浏览器(某个win7上的版本)上，出现过未知的运行时错误。搜了下，原因如下：
IE在对innerHTML进行写操作的时候会检查element是否具备做为这些内容中html对象容器的要求，比如如果你是在一个p里加入包含<li>的html代码，这是会出错的。所以如果你发现这些错误出现，尝试做两件事情：
1、检查你尝试加到innerHTML的html代码是否包含破损的html标签，如没有<ul></ul>包围的<li></li>.
2、把你的容器改成那些比较“包容”的标签，如<span></span>,<div></div>
特别注意的是<tbody>,<table>,<tr>标签里面加正确格式的<td>标签都有可能出错，所以应该避免使用这些标签作为容器，必要时可以用<td>作为容器，再嵌套一层表格。
第二种方法在使用时没有遇到问题，就是用起来貌似比较麻烦。
