`

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

 
阅读更多

今天遇到个问题,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>结束部分 但是页面没问题了- - 好怪异 

  • 大小: 6.3 KB
  • 大小: 3 KB
分享到:
评论

相关推荐

    FixedTable.7z

    table固定左侧多列,画面中可对多个table进行固定,谷歌、ie都试过没问题;之前实在是网上找不到好的,就自己整合弄了一个,质量没的说,肯定胜过90%其他的;调用简单: 例子是:html+jquery+FixedTable.js $("#...

    jquery appen table 问题 ie8下解决方法

    本文将深入探讨“jquery append table问题在IE8下的解决方法”,结合给出的标签“源码”和“工具”,我们来详细讨论这个问题。 在jQuery中,`append()`函数是一个非常常用的方法,它允许我们在DOM(Document Object...

    IE 不兼容的几个js问题及解决方法

    在使用JavaScript动态创建`&lt;table&gt;`元素并添加行(`&lt;tr&gt;`)或单元格(`&lt;td&gt;`)时,直接使用`document.createElement()`结合`appendChild()`可能无法在Internet Explorer(IE)中正确显示。 **解决方法:** 为了确保...

    jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置

    在网页开发中,数据展示通常会使用到表格(Table)元素,而为了提供更好的用户体验,开发者经常需要实现用户可以自由调整表格列宽的功能。本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中...

    table表头滚定左右上下可拉动

    - 对于不支持`position: sticky`的浏览器,如IE,可以使用JavaScript库如`stickytableheaders.js`等实现兼容。 - 使用虚拟滚动技术,只渲染可视区域的行,减少内存占用和提高滚动流畅性。 - 缓存计算结果,避免...

    js 实现 table 行排序

    === SortTableTool.js 实现table行排序. === 源码中有详细说明.sort_table.html 为示例html. 1.支持的排序数据类型有 Number,String,Date,NoCaseString 2.默认开始为升序,可指定为降序. 3.默认为只排序第一个tbody,...

    JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐) .zip

    本示例主要讲解如何使用JavaScript读取XML文件,并在浏览器环境中,无论是在Internet Explorer(IE)还是Firefox等其他浏览器上,以表格(table)的形式展示这些数据。以下是一种实现方法: 首先,我们需要了解XML...

    IE6-IE9使用JSON、table[removed]所引发的问题

    在Firefox等其他浏览器中,`innerHTML`通常可以正常工作,但在IE的兼容模式下,尝试更改`table`、`thead`、`tfoot`、`tbody`、`tr`、`col`、`colgroup`、`html`、`title`、`style`、`frameset`等元素的`innerHTML`时...

    纯table导出excel文档

    在这个场景下,开发者通常会使用一个JavaScript库,如`table2excel.js`,它能够解析HTML表格并将其转换为Excel格式。实现这个功能的步骤大致如下: 1. 包裹table标签:为了能够选取整个表格,可以将table元素包裹在...

    jQuery fixed-table.js锁定表头Table插件特效代码.zip

    最后,通过JavaScript代码初始化fixed-table.js插件,指定要固定的表格元素。在文档加载完成后,可以使用以下代码: ```javascript $(document).ready(function() { $('#fixedHeaderTable').fixedHeaderTable(); }...

    bootstrapTable实现列宽可拖动

    BootstrapTable 的核心库通常包括 `bootstrap-table.css` 和 `bootstrap-table.js`,以及可能需要的其他依赖,如 jQuery。 接下来,我们关注实现列宽可拖动的关键步骤: 1. **启用列宽拖动功能**:在初始化 ...

    javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)

    本文将详细介绍一个基于JavaScript的小组件,该组件实现了原生HTML `&lt;table&gt;` 的排序功能,兼容IE、Firefox、Opera和Chrome等主流浏览器。这个小组件通过简单的HTML标记和JavaScript脚本实现,使得用户可以通过点击...

    div模拟table滚动时表头固定,兼容ie6

    5. **响应式设计**:考虑不同屏幕尺寸下的显示效果,可能需要使用媒体查询(media queries)或者JavaScript来实现自适应布局。 文件名“div模拟table滚动时表头固定,兼容ie620140424”表明这是一个关于此话题的...

    JavaScript获取tr td 的三种方式全面总结(推荐)

    /* 第一种,原生的js,先获取table然后获取tr标签,然后遍历td */ // $('#selectIds').val(); // var table = document.getElementById(tb_table);//获取第一个表格 // var array = table.getElementsByTagName(tr...

    IE6-IE9兼容性问题列表及解决办法

    **描述**:IE7及以前版本支持CSS表达式,这种特性允许在CSS中使用JavaScript计算样式值。然而,在IE8中,这种支持被移除,取而代之的是使用增强的CSS或DHTML逻辑。 **示例**: ```css body { background-color: ...

    table动态添加行并编辑

    JavaScript(js)作为客户端脚本语言,使得我们能够实现表格的动态交互功能,如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中,`&lt;table&gt;`元素用于创建表格,但...

    IE6-IE9中tbody的innerHTML不能赋值的解决方法

    IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 Js代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8/&gt; &lt;title&gt;IE6-IE9中tbody的innerHTML不能复制bug&lt;/title&gt; &lt;/...

Global site tag (gtag.js) - Google Analytics