1)利用document.createElement('标签')的方法动态创建行列
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态创建行列标签</title> <style type="text/css"> #tbList { width: 500px; border: 1px solid blue; border-collapse: collapse; margin: auto; } tr, td { border: 1px solid blue; text-align: center; } </style> <script type="text/javascript"> //页面加载完毕后实行 window.onload = function () { //获取表格工具 var tb = document.getElementById('tbList'); //json格式的单元格数据 var datas = { '360': 'http://www.360.cn', '百度': 'https://www.baidu.com', '腾讯': 'https://www.qq.com' }; //利用for in 循环创建行列 for (var key in datas) { //创建行工具 var tr = document.createElement('tr'); //创建第一列 var td1 = document.createElement('td'); //为第一列添加数据 td1.innerHTML = key; //创建第二列 var td2 = document.createElement('td'); //为第二列添加拼接的超链接数据 td2.innerHTML = '<a href="' + datas[key] + '">' + key + '</a>'; //将两个列追加到行中 tr.appendChild(td1); tr.appendChild(td2); //将行追加到表格中 tb.appendChild(tr); } } </script></head><body> <table id="tbList"></table></body></html>
2)利用insertRow()与insertCell()方法动态创建行列
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态创建行列标签</title> <style type="text/css"> #tbList { width: 500px; border: 1px solid blue; border-collapse: collapse; margin: auto; } tr, td { border: 1px solid blue; text-align: center; } </style> <script type="text/javascript"> //页面加载完毕后实行 window.onload = function () { //获取表格工具 var tb = document.getElementById('tbList'); //json格式的单元格数据 var datas = { '360': 'http://www.360.cn', '百度': 'https://www.baidu.com', '腾讯': 'https://www.qq.com' }; //利用for in 循环创建行列 for (var key in datas) { //创建一行,-1表示追加的意思。 var tr = tb.insertRow(-1); //创建第一列 var td1 = tr.insertCell(-1); //添加数据 td1.innerHTML = key; //创建第二列并为其添加数据 var td2 = tr.insertCell(-1).innerHTML = '<a href="' + datas[key] + '">' + key + '</a>'; } } </script></head><body> <table id="tbList"></table></body></html>
把稳:ie6，ie7对appendChild("tr")的支持和IE8不一样;推举利用insertRow与insertCell来代替第一种方法或者先为表格添加tbody标签再利用第一种方法(只对IE与谷歌浏览器测试,其他浏览器的兼容性须要自测)
