读书人

一段js代码施行失败

发布时间: 2012-09-05 15:19:34 作者: rapoo

一段js代码执行失败

JScript code
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 中传进来的参数

[解决办法]
少了个容器
HTML code
<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>
[解决办法]
IE直接设置table的innerHTML会发生未知运行时错误,改为DOM操作就好了
JScript code
    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"); }
[解决办法]
探讨
IE直接设置table的innerHTML会发生未知运行时错误,改为DOM操作就好了

JScript code

function f(header) {
header = header.split(',');
var t = document.createElement("table"), tr, td, columnNum = header……

[解决办法]
IE直接设置innerHTML没搞,出错,使用DOM来操作,你传递数据进去就好了,
HTML code
<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> 

读书人网 >JavaScript

热点推荐