這是一個比較簡單的問題轧葛。有兩種實現(xiàn)思路：拼接html字符串航棱；操作DOM元素瓢对。分別介紹如下。
拼接html字符串
這可能是大多數(shù)人能快速實現(xiàn)的方法因痛，因為不需要查看JavaScript操作DOM的API。對元素的innerHTML屬性進行賦值岸更，可以改變元素的內(nèi)容鸵膏。
下面的例子中，點擊按鈕怎炊，就會將js數(shù)組中的元素拼接成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>
目前這個實現(xiàn)有一個問題债查，多次點擊按鈕會一直向表格中添加數(shù)據(jù)行。為了修正這個問題瓜挽，將新的元素添加到表格的時候盹廷，最好將前面的刪掉。這里用到replaceChild方法久橙，不過這個方法用的時候俄占，有一個小trick(要通過parentNode調(diào)用)如下：
<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>
總結
這兩種方法都可以實現(xiàn)，但是在用第一種方法的時候淆衷，在IE瀏覽器(某個win7上的版本)上缸榄，出現(xiàn)過未知的運行時錯誤。搜了下祝拯，原因如下：
IE在對innerHTML進行寫操作的時候會檢查element是否具備做為這些內(nèi)容中html對象容器的要求甚带，比如如果你是在一個p里加入包含<li>的html代碼，這是會出錯的佳头。所以如果你發(fā)現(xiàn)這些錯誤出現(xiàn)鹰贵，嘗試做兩件事情：
1、檢查你嘗試加到innerHTML的html代碼是否包含破損的html標簽康嘉，如沒有<ul></ul>包圍的<li></li>.
2砾莱、把你的容器改成那些比較“包容”的標簽，如<span></span>,<div></div>
特別注意的是<tbody>,<table>,<tr>標簽里面加正確格式的<td>標簽都有可能出錯凄鼻，所以應該避免使用這些標簽作為容器腊瑟，必要時可以用<td>作為容器，再嵌套一層表格块蚌。
第二種方法在使用時沒有遇到問題闰非，就是用起來貌似比較麻煩。
