一段js代码执行失败

Question

function f(header){
    var t = document.createElement("table");
    t.innerHTML = header;
    for(var i=0; i<3; i++){
        var tr = t.insertRow(table.rows.length);
        for(var j=0; j<2; j++){
            var td = tr.insertCell(j);
            td.innerText = "aa_" + i + ", " + j;
        }
    }
}f("<tr><th>col1</th><th>col2</th></tr>");
在t.innerHTML = header; 时失败
这是为什么？我的目标是，希望在动态创建 table 对象时，它的表头可以由调用者来指定，就是函数 f 中传进来的参数

Answer 1

少了个容器
<div id="test"></div>
<script type="text/javascript">
    function f(header) {
        var oTest = document.getElementById("test");
        var t = document.createElement("table");
        t.innerHTML = header;
        for (var i = 0; i < 3; i++) {
            var tr = t.insertRow(t.rows.length);
            for (var j = 0; j < 2; j++) {
                var td = tr.insertCell(j);
                td.innerText = "aa_" + i + ", " + j;
            }
        }
        oTest.insertBefore(t, oTest.childNodes[0]);  
    }
    f("<tr><th>col1</th><th>col2</th></tr>");
</script>

Answer 2

少了个容器
<div id="test"></div>
<script type="text/javascript">
    function f(header) {
        var oTest = document.getElementById("test");
        var t = document.createElement("table");
        t.innerHTML = header;
        for (var i = 0; i < 3; i++) {
            var tr = t.insertRow(t.rows.length);
            for (var j = 0; j < 2; j++) {
                var td = tr.insertCell(j);
                td.innerText = "aa_" + i + ", " + j;
            }
        }
        oTest.insertBefore(t, oTest.childNodes[0]);  
    }
    f("<tr><th>col1</th><th>col2</th></tr>");
</script>

Answer 3

IE直接设置table的innerHTML会发生未知运行时错误，改为DOM操作就好了    function f(header) {
        header = header.split(',');
        var t = document.createElement("table"), tr, td, columnNum = header.length;
        document.body.appendChild(t);
        tr = t.insertRow(0);
        for (var i = 0; i < columnNum; i++) {
            td = document.createElement('th');tr.appendChild(td) ;td.innerHTML = header[i];
        }
        for (var i = 0; i < 3; i++) {
            tr = t.insertRow(t.rows.length);
            for (var j = 0; j < columnNum; j++) {
                td = tr.insertCell(j);
                td.innerHTML = "aa_" + i + ", " + j;
            }
        }
    }    window.onload = function () { f("col1,col2,col3,col4"); }

Answer 4

这里不是少了容器的问题，而是 table 类型的 dom 对象在设置它的 innerHTML 值时会报未知错误:
t.innerHTML = header;

Answer 5

用DOM的方式我知道可以，但是这样表头就只能有一行了，我希望我的表头可以复杂一点，支持两行或者三行还有合并，到底怎么做由调用者来决定。因此，这些信息只能在应用的时候通过外部传进来，比如下面的表格<table width="400px" border="1" style="border-collapse:collapse">
  <tr><td rowspan="2" align="center">Name</td><td colspan="3" align="center">Others</td></tr>
  <tr><td>Birth</td><td>Gender</td><td>Address</td></tr>
  <tr>
    <td>Smith</td><td>2000-01-23</td><td>Male</td><td>China</td>
  </tr>
  <tr>
    <td>Smith</td><td>2000-01-23</td><td>Male</td><td>China</td>
  </tr>
</table>

Answer 6

IE直接设置innerHTML没搞，出错，使用DOM来操作，你传递数据进去就好了，<table width="400px" border="1" style="border-collapse:collapse">
<thead id="tHead"></thead>
  <tr>
    <td>Smith</td><td>2000-01-23</td><td>Male</td><td>China</td>
  </tr>
  <tr>
    <td>Smith</td><td>2000-01-23</td><td>Male</td><td>China</td>
  </tr>
</table>
<script>
    var heads = [
    [{ rowSpan: 2, align: 'center', innerHTML: 'Name' }, { colSpan: 3, align: 'center', innerHTML: 'Others'}]//第一行的td放数组里面
    , [{ innerHTML: 'Birth' }, { innerHTML: 'Gender' }, { innerHTML: 'Address'}]//第一行的td放数组里面
]
    , thead = document.getElementById('tHead'), tr, td, item, i, j, headLen = heads.length, tdLen;    for (i = 0; i < headLen; i++) {
        tr = thead.insertRow(i);
        item = heads[i];
        tdLen = item.length;
        for (j = 0; j < tdLen; j++) {
            td = tr.insertCell(j);
            for (attr in item[j]) td[attr] = item[j][attr];
        }
    }
</script>