<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>动态添加Table</title> <mce:script type="text/javascript"><!-- //AddData1()函数不能在ie6,ie7下执行,可在Firefox,Chorme下执行 function AddData1(){ var data={"001":"张三","003":"王五","007":"邦德"}; var table1=document.getElementById("table1"); var th=document.createElement("th"); var td1=document.createElement("td"); td1.innerHTML="代号";//Firefox下不支持innerText th.appendChild(td1); var td2=document.createElement("td"); td2.innerHTML="姓名";//Firefox下不支持innerText th.appendChild(td2); table1.appendChild(th); for(var key in data){ var value=data[key]; var tr=document.createElement("tr"); var td1=document.createElement("td"); td1.innerHTML=key; tr.appendChild(td1); var td2=document.createElement("td"); td2.innerHTML="<font color=red>"+value+"</font>"; tr.appendChild(td2); table1.appendChild(tr); } } //AddData2()可在ie6,ie7,ie8,chorme下执行, function AddData2(){ var data={"001":"张三","003":"王五","007":"邦德"}; var table2=document.getElementById("table2"); var th=document.createElement("th"); var td1=document.createElement("td"); td1.innerHTML="代号";//Firefox下不支持innerText th.appendChild(td1); var td2=document.createElement("td"); td2.innerHTML="姓名";//Firefox下不支持innerText th.appendChild(td2); table1.appendChild(th); for(var key in data){ var value=data[key]; var tr=document.createElement("tr"); var td1=document.createElement("td"); td1.innerHTML=key; tr.appendChild(td1); var td2=document.createElement("td"); td2.innerHTML="<font color=red>"+value+"</font>"; tr.appendChild(td2); table2.tBodies[0].appendChild(tr); } } //ie6,ie7,ie8,ff,chorme下均可执行 function AddData3(){ var data={"001":"张三","003":"王五","007":"邦德"}; var table3=document.getElementById("table3"); var th=table3.insertRow(-1);//Firefox下必须要为-1;表示在表格的最后插入一行 var td1=th.insertCell(-1); td1.innerHTML="代号";//Firefox下不支持innerText var td2=th.insertCell(-1); td2.innerHTML="姓名";//Firefox下不支持innerText for(var key in data){ var value=data[key]; var tr=table3.insertRow(-1); var td1=tr.insertCell(-1); td1.innerHTML=key; var td2=tr.insertCell(-1); td2.innerHTML="<font color=red>"+value+"</font>"; } } // --></mce:script> </head> <body> <table id="table1" border="1"></table> <table id="table2"><tbody></tbody></table> <table id="table3"></table> <input type="button" value="添加数据1" οnclick="AddData1()" /> <input type="button" value="添加数据2" οnclick="AddData2()" /> <input type="button" value="添加数据3" οnclick="AddData3()" /> </body> </html>