问题描述

关于outerHTML的赋值问题；

做动态表格时，想用outerHTML直接生成代码，于是写了如下内容：

 $.ajax({
            type:"post",
            url:"getData.php",
            dataType:"json",
            success: function(msg)
            {
             for(var i = 0; i < (msg.length)/4; i++)
               {
            //赋值
            $("#tableBody")[0].outerHTML='<tr class="logDataRow">'+
                                            '<td>'+ msg[4*i]+'</td>'+
                                            '<td>'+msg[4*i+1] +'</td>'+
                                            '<td>'+msg[4*i+2] +":"+msg [4*i+3] +'</td></tr>';
            //直接打印
            console.log($("#tableBody")[0].outerHTML);
                };
            },
            error : function(){alert("error!");}

            })

        在firefox环境下可以直接打印出表格结构，赋值却会报错
        TypeError: $(...)[0] is undefined
        百思不得其解，求各位大神指教，初学，求别骂

解决方案

1.#tableBody 确定这个元素存在么？
2.http://blog.csdn.net/magi1201/article/details/44131361 innerHTML

解决方案二：

存在的 问题解决了 是表结构的问题 谢谢

解决方案三：

 $("#tableBody")[0].outerHTML='
'+
''+ msg[4*i]+''+
''+msg[4*i+1] +''+
''+msg[4*i+2] +":"+msg [4*i+3] +'';

拼接方式是否正确，看着拼接字符串方式似乎不对，最后一个双引号没有匹配，开头的单引号也没有匹配。
另外，不建议把$("#tableBody")[0].outerHTML放循环里面，定义一个变量在循环内，循环完再给outerHTML，不然性能慢。

解决方案四：

你设置的是outerHTML，应该要加上table或者tbody（如果你的tableBody是tbody元素）标签才对。。。outerHTML是连table这种一起替换了

 var s='<table>'
for(var i = 0; i < (msg.length)/4; i++)
               {
            //赋值
           s+='<tr class="logDataRow">'+
                                            '<td>'+ msg[4*i]+'</td>'+
                                            '<td>'+msg[4*i+1] +'</td>'+
                                            '<td>'+msg[4*i+2] +":"+msg [4*i+3] +'</td></tr>';

                };
     $("#tableBody")[0].outerHTML=s+'</table>'