今天帮别人写一个网页，发现：当用javascript动态设置tr.style.display = "block"显示某行时，使用IE浏览没有问题，但使用firefox浏览时该行被移到了其它行的后面，很是诧异。看下面这个例子：
<html>
<head>
<script type="text/javascript">
function body_load()
{
var obj = document.getElementById("tr1");
obj.style.display = "block";
}
</script>
</head>
<body onload="javascript:body_load();">
<table>
<tbody id="tr1" style="display:none">
<tr>
<td>第一行</td>
</tr>
</tbody>
<tbody id="tr2">
<tr>
<td>第二行</td>
</tr>
</tbody>
<tbody id="tr3">
<tr>
<td>第三行</td>
</tr>
</tbody>
</table>
</body>
</html>
它在firefox中显示时，“第一行”被显示在最后一行。
于是在处理好需要显示的行后，另写了一个函数，先记录需要显示的行，然后将所有行的style.display都设置为"none",最后再将需要显示的行依次显示出来。这样，IE和firefox的显示结果就一样了。
后来，我还是觉得这个方法很笨，就又潜心研究了一番，发现，只要将第二行和都三行都加上style="display:block"，显示也就正常了。见下面的代码：
<html>
<head>
<script type="text/javascript">
function body_load()
{
var obj = document.getElementById("tr1");
obj.style.display = "block";
}
</script>
</head>
<body onload="javascript:body_load();">
<table>
<tbody id="tr1" style="display:none">
<tr>
<td>第一行</td>
</tr>
</tbody>
<tbody id="tr2" style="display:block">
<tr>
<td>第二行</td>
</tr>
</tbody>
<tbody id="tr3" style="display:block">
<tr>
<td>第三行</td>
</tr>
</tbody>
</table>
</body>
</html>
由此可见，firefox对是否设置style="display:block"是区别对待的，而IE作了适当的兼容处理。
结论和教训是：尽量使用标准做法，不要指望浏览器可以兼容。IE用多了就常常会忘记这点。
注：如果不使用tbody则没有这个问题。但tbody可以起到对行进行分组的作用，当一次需要显示或隐藏多行时很有用。
分享到：
相关推荐
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]它在firefox中显示时，“第一行”被显示在最后一行。 于是在处理好需要显示的行后，另写了一个函数，先记录需要显示的行，然后将所有行的style.display都设置为”...
在JavaScript中，显示或隐藏网页中的某些列是一个常见的需求，特别是在构建动态用户界面时。这个需求通常涉及到HTML表格（`<table>`元素）或者通过CSS布局实现的列状结构。以下是一些关于如何使用JavaScript来操作...
这两个浏览器在解析HTML、CSS以及JavaScript时有着不同的实现方式，导致某些代码在Firefox下正常运行，但在IE下可能出现问题，反之亦然。这份"Firefox和IE兼容参考"文档将详细探讨这些差异，帮助开发者解决跨浏览器...
### JavaScript 控制 `tbody` 的隐藏与显示 #### 背景介绍 本文将详细介绍如何使用 JavaScript 控制 HTML 表格中的 `tbody` 部分实现隐藏与显示的功能。这个问题是作者经过几天的研究和向社区求助后解决的。通过这...
table表格，让thead固定，tbody有滚动条， 关键是都对齐的纯css写法关键是都对齐的纯css写法
Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...
但是，在使用tbody元素时需要注意一些方法，以避免出现错误。 首先，需要注意tbody元素的嵌套结构。在 HTML 中，tbody元素可以嵌套tr元素，而tr元素可以嵌套td元素。因此，在使用tbody元素时，需要正确地嵌套这些...
在使用JavaScript动态创建`<table>`元素并添加行（`<tr>`）或单元格（`<td>`）时，直接使用`document.createElement()`结合`appendChild()`可能无法在Internet Explorer（IE）中正确显示。 **解决方法：** 为了确保...
在`<td>`元素内部，`|</span>` 和 `<em>-</em>` 是用于显示排序状态的辅助元素，它们在排序时会被显示或隐藏。 接下来，我们需要一个JavaScript脚本来处理排序逻辑。在这个例子中，脚本文件名为`sort.js`。脚本的...
在IE和Firefox之间，解析XML的方式有所不同： - **IE**：IE8及以下版本使用`ActiveXObject("Microsoft.XMLDOM")`创建XML DOM对象，然后调用`loadXML()`方法加载XML字符串。 - **Firefox**：其他现代浏览器，包括...
修复Firefox下的padding导致的错位问题 修复thead复制没有底部分割线的问题 修复thead复制时无背景色的问题 增加复选框同步功能（如果是JS代码设置复选框选中，需要调用 .setCheckBoxSync()方法） ....
修复Firefox下的padding导致的错位问题 修复thead复制没有底部分割线的问题 修复thead复制时无背景色的问题 增加复选框同步功能（如果是JS代码设置复选框选中，需要调用 .setCheckBoxSync()方法） ....
然而，当表格内容过多导致无法在单个视窗内完全显示时，滚动条就会出现，这时表头对齐问题就显得尤为重要。为了解决"table内容出现滚动条和表头对齐问题"，我们需要深入理解表格布局、CSS样式控制以及可能涉及到的...
CSS设置table下tbody的滚动条实现是一种网页布局技术，能够让HTML表格的tbody部分在内容超出可视区域时显示出垂直滚动条，而thead（表头）则保持固定不动。这种技术在制作具有大量数据内容的网页表格时非常有用，...
然而，在实际应用中，我们可能会遇到一个常见的问题：表格的列头（thead）与内容（tbody）在对齐上出现问题，这会严重影响用户体验。本文将深入探讨这个问题的原因，并提供一个终极解决方案。 列头与内容不对齐的...
### 使用JavaScript删除HTML表格中的第一个tbody元素 在Web开发中，动态操作DOM（文档对象模型）是常见的...需要注意的是，在实际项目中还需要考虑到异常处理和兼容性问题，确保代码能够在各种浏览器环境下稳定运行。
在使用jQuery Datatables进行网页数据展示时，可能会遇到表头（thead）与表格内容（tbody）对齐问题，尤其是在浏览器窗口大小变化或者响应式布局中。这个问题通常表现为表头与内容列宽不一致，造成视觉上的错位。...