IE7下 JS画table需要写上tbody元素

最新推荐文章于 2025-06-22 10:00:00 发布

chenyi84

最新推荐文章于 2025-06-22 10:00:00 发布

阅读量246

点赞数

CC 4.0 BY-SA版权

分类专栏： jsp html js

本文链接：https://blog.youkuaiyun.com/chenyi84/article/details/84719849

js 同时被 3 个专栏收录

9 篇文章

订阅专栏

jsp

2 篇文章

订阅专栏

html

1 篇文章

订阅专栏

本文解决了一个在360浏览器中使用JS动态生成表格时出现的问题，该问题在Chrome浏览器中正常显示，但在360浏览器中无法正确渲染。通过在表格元素中加入<tbody>标签，成功解决了此兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到个问题，360浏览器页面请求回来的数据，JS画完不显示表格，chrome没问题360有问题，后来跟断点发现页面结构为：

很明显出问题了

html部分代码

 <table border="0" cellspacing="0" cellpadding="0" class="zhlc_table" id="zhlc_table">

</table>

js部分

var txtContent = XmlParser(response.responseXML, {record: "txtContent"});
	var fileContent=txtContent[0];
	var tableEle=document.getElementById('zhlc_table');
	for (var i = 0; i < fileContent.map.length; i++) 
	{
		var trEle= document.createElement('tr');
		var thEle = document.createElement('th');
		thEle.innerHTML = fileContent.map[i].key;
		 
		var tdEle = document.createElement('td');
		
		var inputEle = document.createElement('span');
		var lineContent = fileContent.map[i].value
		var lineContentArr = lineContent.split('*');
		
		var lineRealContent ='';
		for(var j = 0; j < lineContentArr.length; j++)
		{
			lineRealContent += lineContentArr[j];
			lineRealContent += '<br />'
		}
			
         inputEle.innerHTML=lineRealContent;
         tdEle.appendChild(inputEle);
         trEle.appendChild(thEle);
         trEle.appendChild(tdEle);
         tableEle.appendChild(eleTbody);
         
    }

从网上看看类似问题貌似是IE7下默认会给个<tbody/> 标签但是画页面并没有写到table下

JS改进了下

var txtContent = XmlParser(response.responseXML, {record: "txtContent"});
	var fileContent=txtContent[0];
	var tableEle=document.getElementById('zhlc_table');
	var eleTbody = document.createElement("TBODY");
	for (var i = 0; i < fileContent.map.length; i++) 
	{
		var trEle= document.createElement('tr');
		var thEle = document.createElement('th');
		thEle.innerHTML = fileContent.map[i].key;
		 
		var tdEle = document.createElement('td');
		
		var inputEle = document.createElement('span');
		var lineContent = fileContent.map[i].value
		var lineContentArr = lineContent.split('*');
		
		var lineRealContent ='';
		for(var j = 0; j < lineContentArr.length; j++)
		{
			lineRealContent += lineContentArr[j];
			lineRealContent += '<br />'
		}
			
         inputEle.innerHTML=lineRealContent;
         tdEle.appendChild(inputEle);
         trEle.appendChild(thEle);
         trEle.appendChild(tdEle);
         eleTbody.appendChild(trEle);
         tableEle.appendChild(eleTbody);
         
    }

其实目测会出现问题但是实际解决了如图

去search了确切没有</tbody>结束部分但是页面没问题了- - 好怪异