javascript动态创建表格及添加数据实例详解
本文实例讲述了javascript动态创建表格及添加数据的方法。分享给大家供大家参考。具体分析如下:
1.动态创建表格(代码不兼容IE6)
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>动态创建表格</title> <scripttype="text/javascript"> functionAppendTableData(){ vartable=document.getElementById("tblMain"); vardata={"百度":"http://www.baidu.com", "毛票票":"https://www.nhooo.com", "搜狐":"http://www.sohu.com" }; for(varkeyindata){ vartr=document.createElement("tr"); vartd1=document.createElement("td"); td1.innerText=key; //FireFox不支持innerText,只能使用innerHTML tr.appendChild(td1); vartd2=document.createElement("td"); td2.innerHTML="<ahref='"+data[key]+"'>"+data[key]+"</a>"; tr.appendChild(td2); table.appendChild(tr); } } </script> </head> <body> <tableid="tblMain"></table> <inputtype="button"value="动态添加网格数据" onclick="AppendTableData()"/> </body> </html>
2.动态创建表格(兼容IE6、IE7)
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>添加网格数据(处理了IE兼容问题)</title> <scripttype="text/javascript"> functionAppendData(){ vardata={"毛票票":"https://www.nhooo.com", "百度":"http://www.baidu.com", "搜狐":"http://www.sohu.com"}; vartable=document.getElementById("tblMain"); for(varkeyindata){ varvalue=data[key]; vartr=table.insertRow(-1); //FireFox必须使用-1这个参数 vartd1=tr.insertCell(-1); td1.innerText=key; vartd2=tr.insertCell(-1); td2.innerHTML="<ahref='"+value+"'>"+value+"</a>"; } } </script> </head> <body> <tableborder="1"id="tblMain"></table> <inputtype="button"value="添加网格数据(处理了IE兼容问题)" onclick="AppendData()"/> </body> </html>
3.动态创建表格(兼容IE6、IE7)
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>动态创建表格(处理IE6兼容问题)</title> <scripttype="text/javascript"> functionAppendTableData(){ vartable=document.getElementById("tblMain"); vardata={"百度":"http://www.baidu.com", "毛票票":"https://www.nhooo.com", "搜狐":"http://www.sohu.com" }; for(varkeyindata){ vartr=document.createElement("tr"); vartd1=document.createElement("td"); td1.innerText=key; tr.appendChild(td1); vartd2=document.createElement("td"); td2.innerHTML="<ahref='"+data[key]+"'>"+data[key]+"</a>"; tr.appendChild(td2); //table.appendChild(tr);把这一句替换掉 table.tBodies[0].appendChild(tr); } } </script> </head> <body> <!--由于动态添加的数据在debugbar中看生成的HTML代码发现, 会自动添加一个<tbody> 并且内容是空的,把我们动态生成的数据给冲掉了, 所以我们手工添加一个<tbody> tr添加到这个<tbody>下面 --> <tableid="tblMain"><tbody></tbody></table> <inputtype="button"value="动态添加网格数据" onclick="AppendTableData()"/> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。