javascript动态创建表格

百变猪娃娃 2011-05-03 05:21:04

点击按钮就是没反应
代码如下：

<!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>动态创建表格</title>
<script type="text/javascript">
function LoadData(){
var data = {"腾讯":"http://www.qq.com","百度":"http://www.baidu.com","新浪":"http://www.sina.com"};

var tableLinks = document.getElementById("tableLinks");
for(var key in data){
var value = data[key];

var tr = document.createElement("tr");

var td1 = document.createElement("td");
td1.innerText =key;
tr.appendChild(td1);

var td2 = document.createElement("td");
td2.innerHTML = "<a href='"+value+"'>" +value+ "</a>";
tr.appendChild(td2);

tableLinks.appendChild(tr);
}
}
</script>
</head>
<body>
<table id="tableLinks"></table>
<input type="button" value="创建表格" onclick="LoadData()" />
</body>
</html>

...全文

136 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

kingdom_0 2011-05-04

打赏
举报

[Quote=引用 7 楼 net_lover 的回复:]

有些浏览器需要使用tbody的

var tbody = document.createElement("tbody");

。。。
tbody.appendChild(tr);
tableLinks.appendChild(tbody);
[/Quote]
创建table的时候，最好加上tbody

houdaweiguoyajing 2011-05-04

打赏
举报

当在<table>元素中使用诸如innerHTML或outerHtml之类的属性时会遇到
<table>元素只读的限制。
用jquery吧，不要考虑浏览器的兼容性了，它都帮你解决了。
$('table body')[0].innerHTML +="<tr>\n" +
"<td>Here is text</td>\n" +
"</tr>\n";

sweetsmile 2011-05-04

打赏
举报

我的就是IE7，加入tbody后，可以创建表格了。谢谢net_lover兄！！！

孟子E章 2011-05-04

打赏
举报

ie7等需要加入tbody
完整的代码

<!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>动态创建表格</title>

  <script type="text/javascript">

    function LoadData() {

      var data = { "腾讯": "http://www.qq.com", "百度": "http://www.baidu.com", "新浪": "http://www.sina.com" };



      var tableLinks = document.getElementById("tableLinks");

      var tbody = document.createElement("tbody");

      for (var key in data) {

        var value = data[key];

        

        var tr = document.createElement("tr");



        var td1 = document.createElement("td");

        td1.innerText = key;

        tr.appendChild(td1);



        var td2 = document.createElement("td");

        td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";

        tr.appendChild(td2);

        tbody.appendChild(tr);

        

      }

      tableLinks.appendChild(tbody);



    }

  </script>

</head>

<body>

  <table id="tableLinks">

  </table>

  <input type="button" value="创建表格" onclick="LoadData()" />

</body>

</html>

孟子E章 2011-05-04

打赏
举报

有些浏览器需要使用tbody的

var tbody = document.createElement("tbody");

。。。
tbody.appendChild(tr);
tableLinks.appendChild(tbody);

sweetsmile 2011-05-04

打赏
举报

我也用LZ的代码试过，同样创建不了表格。不过，下面的代码可以，使用insertRow和insertCell方法，LZ可以试一下。
<html>
<head> <title>Test javascript method </title>

<body>
<script language="javascript">
function LoadData() {
var data = {"腾讯":"http://www.qq.com","百度":"http://www.baidu.com","新浪":"http://www.sina.com"};
var tableLinks = document.getElementById("tableLinks");
for(var key in data){
var value = data[key];

var tr = tableLinks.insertRow(-1);
var td1 = tr.insertCell(-1);
td1.innerText =key;

var td2 = tr.insertCell(-1);
td2.innerHTML = "<a href='"+value+"'>" +value+ "</a>";
}
}
</script>
<table id="tableLinks"></table>
<input type="button" value="创建表格" onclick="LoadData()" /></body>