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

[tatty_bad]

<table>
<tr>
<td>CB1SK - 001 </td>
<td>323123123 </td>
</tr>
</table>

我现在想在中间再插入一行

因为数据量很大的原因,所以我预先把这一行的代码写好了

<tr><td>jkew0krew0riewiew0iew0riwer</td><td>rfsdffr3r</td></tr>

用js把这一行插进去之后,除了上面是表格格式的,下面插入的数据全部把格式丢了,成了一堆文本的.

请问这是怎么回事???

[mingxuan3000]

innerHTML

[fytx0113]

你js怎么写的？

[tatty_bad]

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

[tatty_bad]

var outinfo = obj.responseXML.getElementsByTagName("table")[0].xml;
$("TableList").innerHTML += outinfo;

这样写的..

循环执行几次,除了第一次的是个正常的表格,后面的都不是的.

而如果每次都把<table></table>加上,就分别都是正常的,但是不是在一个表格了啊...

所以还是不对的...

[tatty_bad]

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

[victor_armin]

为啥不用createElement呢？

[tatty_bad]

数据很多,用createElement不现实的...

就这我已经把数据分为几部分来读取和显示了...

[fytx0113]

那用innerText可不可以？

[tatty_bad]

肯定不行的...

[huifeidebaobao]

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;

刚写，不知道又没有错误！希望可以解决楼主的问题

[jayflee]

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]

[tatty_bad]

楼上两位没有明白我的意思啊.

我是说把整个Tr这一行的代码,插进去已经存在的Table.

如果说新创建一个Table,那就没有这样的问题了...

[是是非非]

貌似你只能用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>

[是是非非]

这个是完整的

<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>

[浴火_凤凰]

用DOM的标准方法createElement和createTextNode吧