我想在html页面的特定位置动态创建表

时间:2017-07-01 17:56:20

标签: javascript html

我正尝试在页面的特定位置使用js创建表格 我得到输出但是在结果之前得到错误取消 在创建表之前显示错误,取消定义此

的任何解决方案
<script>
function tab()
{   
   var x=4;
function tabb(){
var table = document.createElement('table');
table.id="a-table";
for (var i = 1; i < x; i++){
var tr = document.createElement('tr');   
tr.id="myrow";
var td1 = document.createElement('td');
var td2 = document.createElement('td');


tr.appendChild(td1);
tr.appendChild(td2);

table.appendChild(tr);
}
document.body.appendChild(table);
}

document.getElementById("tab").innerHTML=tabb();
var cells = document.getElementById("a-table").getElementsByTagName("td");
        var i=0;
        for(i = 0; i < x+1; i++){
        var cell = cells[i];
        cell.innerHTML = "<img class=img1 src=faculty/comm/"+i+".jpg>";

        }


 }
 </script>
<style>
td {
border: solid 1px #000;
border-style: none solid solid none;
padding: 10px;
border-radius:8px;
}
</style>
<body>
<input type=button onclick="tab()" value="create">
<div id="tab"></div>
</body>

1 个答案:

答案 0 :(得分:0)

即使这会从页面中删除undefined,我强烈建议您考虑更干净,优化的tab功能。

function tab()
{
var x=4;
var table = document.createElement('table');
table.id="a-table";
for (var i = 0; i < x; i++){
var tr = document.createElement('tr');   
tr.id="myrow";
var td1 = document.createElement('td');
var td2 = document.createElement('td');


tr.appendChild(td1);
tr.appendChild(td2);

table.appendChild(tr);
}
document.getElementById("tab").appendChild(table);

var cells = document.getElementById("a-table").getElementsByTagName("td");
        var i=0;
        for(i = 0; i < x+1; i++){
        var cell = cells[i];
        cell.innerHTML = "<img class=img1 src=faculty/comm/"+i+".jpg>";

        }


 }
td {
border: solid 1px #000;
border-style: none solid solid none;
padding: 10px;
border-radius:8px;
}
<input type=button onclick="tab()" value="create">
<div id="tab"></div>