js 插入一行,为什么变形了?

Question

就是用innerHTML变形了...
因为整个表格都是用js来插入的.
数据量比较大,所以就分批插入了..
除了第一次插入的是符合要求的表格之外,后面插入的全不对的..
都成了文字了...

Answer 1

var outinfo = obj.responseXML.getElementsByTagName("table")[0].xml;
$("TableList").innerHTML += outinfo;这样写的..循环执行几次,除了第一次的是个正常的表格,后面的都不是的.而如果每次都把<table></table>加上,就分别都是正常的,但是不是在一个表格了啊...所以还是不对的...

Answer 2

接受用的是一个层
<div id="TableList"></div>

Answer 3

数据很多,用createElement不现实的...就这我已经把数据分为几部分来读取和显示了...

Answer 4

TableList是什么啊，
把整个table放在div中<div id=div1></div>
var strTable="<table>";
for(var i=0;i<10;i++)
{
strTable+="<tr>"; 
strTable+="<td>"+i+"</td>" 
strTable+="<td>"+i+"</td>";
strTable+="</tr>";  }
strTable+="</table>"
document.getelementbyid("div1").innerHtml="";//如果需要清空预定义的tr
document.getelementbyid("div1").innerHtml=strTable;刚写，不知道又没有错误！希望可以解决楼主的问题

Answer 5

10楼是个好主意。注意这个：table的innerHTML是只读的。。[code=INIFile]
innerHTML Property The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value
[/code]

Answer 6

楼上两位没有明白我的意思啊.我是说把整个Tr这一行的代码,插进去已经存在的Table.如果说新创建一个Table,那就没有这样的问题了...

Answer 7

貌似你只能用insertRow和insertCell了tr和td的innerHTML,outerHTML都不能操作
insertAdjacentHTML只对td有效你又要速度……那给你一个建议，如果能改表格的源码的话……
用别的东西加上css模拟一个表格<style type="text/css">
<!--
@media all{
v\:* {behavior:url(#default#vml);}
* {font-size:12px;} div.table {border:solid 1px black;padding:0px;display:table;}
div.tr {border:none;padding:0px;margin:0px;display:table-row;height:20px;}
div.th {border-right:solid 1px black;border-bottom:solid 1px black;font-weight:700;text-align:center;display:table-cell;clear:none;float:left;background-color:#808080;height:20px;padding-top:2px;}
div.td {border-right:solid 1px black;border-bottom:solid 1px black;text-align:center;display:table-cell;clear:none;float:left;height:20px;padding-top:2px;}
}
-->
</style>
<div class="table" style="width:322px;">
<div class="tr" style="width:100%;">
<div class="th" style="width:100px;">测试一下</div>
<div class="th" style="width:60px;">继续测试</div>
<div class="th" style="width:160px;">再次测试</div>
</div>
<div class="tr" style="width:100%;">
<div class="td" style="width:100px;">a</div>
<div class="td" style="width:60px;">b</div>
<div class="td" style="width:160px;">c</div>
</div>
<div class="tr" style="width:100%;">
<div class="td" style="width:100px;">a</div>
<div class="td" style="width:60px;">b</div>
<div class="td" style="width:160px;">c</div>
</div>
<div class="tr" style="width:100%;">
<div class="td" style="width:100px;">a</div>
<div class="td" style="width:60px;">b</div>
<div class="td" style="width:160px;">c</div>
</div>
<div class="tr" style="width:100%;">
<div class="td" style="width:100px;">a</div>
<div class="td" style="width:60px;">b</div>
<div class="td" style="width:160px;">c</div>
</div>
<div class="tr" style="width:100%;">
<div class="td" style="width:100px;">a</div>
<div class="td" style="width:60px;">b</div>
<div class="td" style="width:160px;">c</div>
</div>
<div class="tr" style="width:100%;">
<div class="td" style="width:100px;">a</div>
<div class="td" style="width:60px;">b</div>
<div class="td" style="width:160px;">c</div>
</div>
</div>

Answer 8

这个是完整的<style type="text/css">
<!--
@media all{
v\:* {behavior:url(#default#vml);}
* {font-size:12px;}
div.table {border:solid 1px black;padding:0px;display:table;}
div.tr {border:none;padding:0px;margin:0px;display:table-row;height:20px;}
div.th {border-right:solid 1px black;border-bottom:solid 1px black;font-weight:700;
text-align:center;display:table-cell;clear:none;float:left;background-color:#808080;height:20px;padding-top:2px;}
div.td {border-right:solid 1px black;border-bottom:solid 1px black;text-align:center;
display:table-cell;clear:none;float:left;height:20px;padding-top:2px;}
}
-->
</style>
<script language="javascript">
function InsertRow(a,b,c){
var s='<div class="tr" style="width:100%;">' +
'<div class="td" style="width:100px;">#a#</div>'+
'<div class="td" style="width:60px;">#b#</div>'+
'<div class="td" style="width:160px;">#c#</div>'+
  '</div>';
s=s.replace('#a#',a);
s=s.replace('#b#',b);
s=s.replace('#c#',c); var i=t.childNodes.length;
t.childNodes[i-1].insertAdjacentHTML('afterEnd',s);
}
</script>
<div class="table" style="width:322px;" id="t">
<div class="tr" style="width:100%;">
<div class="th" style="width:100px;">测试一下</div>
<div class="th" style="width:60px;">继续测试</div>
<div class="th" style="width:160px;">再次测试</div>
</div>
<div class="tr" style="width:100%;">
<div class="td" style="width:100px;">a</div>
<div class="td" style="width:60px;">b</div>
<div class="td" style="width:160px;">c</div>
</div>
<div class="tr" style="width:100%;">
<div class="td" style="width:100px;">a</div>
<div class="td" style="width:60px;">b</div>
<div class="td" style="width:160px;">c</div>
</div>
<div class="tr" style="width:100%;">
<div class="td" style="width:100px;">a</div>
<div class="td" style="width:60px;">b</div>
<div class="td" style="width:160px;">c</div>
</div>
<div class="tr" style="width:100%;">
<div class="td" style="width:100px;">a</div>
<div class="td" style="width:60px;">b</div>
<div class="td" style="width:160px;">c</div>
</div>
<div class="tr" style="width:100%;">
<div class="td" style="width:100px;">a</div>
<div class="td" style="width:60px;">b</div>
<div class="td" style="width:160px;">c</div>
</div>
<div class="tr" style="width:100%;">
<div class="td" style="width:100px;">a</div>
<div class="td" style="width:60px;">b</div>
<div class="td" style="width:160px;">c</div>
</div>
</div>
<button onclick="JavaScript:InsertRow(1,2,3);">测试</button>

Answer 9

用DOM的标准方法createElement和createTextNode吧