table tr 显示的有关问题(疑是IE的BUG)-HTML教程-爱易网页

table tr 显示的有关问题(疑是IE的BUG)

日期：2014-05-17　浏览次数：20977 次

table tr 显示的问题(疑是IE的BUG)
在系统中有一表格，有隐藏 TR的操作，但发现行显示异常。后浓缩为以下程序，发现的确与TR的隐藏有关。
具体表现在，当先点击第一行，隐藏了某些行后，再点击最后一行，本应相应的行颜色变化，但现在却是在行的顶部留有一细长条，其颜色没有变化。（我用的IE8.0版本),疑为IE8.0的BUG.不知哪位高手有何建议能够解决这个问题。谢谢了。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>TABLE TR</title>
</head>
<body>

<table id="tab" border=1 width=200>
<tr id="trMain1" onclick="hidden()"><td>a [click me first.]</td></tr>
<tr id="trSub1"><td>b</td></tr>
<tr id="trSub2"><td>c</td></tr>
<tr id="trMain2"><td>d</td></tr>
<tr id="trMain3" onclick="this.style.backgroundColor='#7DD6F0'"><td>e</td></tr>
<tr id="trMain4" onclick="this.style.backgroundColor='#7DD6F0'"><td>f</td></tr>
<tr id="trSub3" onclick="this.style.backgroundColor='#7DD6F0'"><td>g</td></tr>
<tr id="trSub4" onclick="this.style.backgroundColor='#7DD6F0'"><td>h [click me second.]</td></tr>
</table>

</body>
</html>
<script>
var hs=false;
function hidden()
{
var c = (hs)?("block"):("none");
document.getElementById("trMain2").style.display = c;
document.getElementById("trMain3").style.display = c;
document.getElementById("trMain4").style.display = c;
hs = !hs;
}
</script>

------解决方案--------------------
没有问题啊
------解决方案--------------------

HTML code

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>TABLE TR</title>
<script>
var hs = false;

//hidden是保留字，在Chrome等浏览器中会报错
function tr_hidden() {
  (hs) ? (c = "table-row") : (c = "none"); //正常的表格行display属性值应为table-row
  document.getElementById("trMain2").style.display = c;
  document.getElementById("trMain3").style.display = c;
  document.getElementById("trMain4").style.display = c;
  hs = !hs;
}
</script>
</head>
<body>

<table id="tab" border=1 width=200>
<tr id="trMain1" onclick="tr_hidden()"><td>a [click me first.]</td></tr>
<tr id="trSub1"><td>b</td></tr>
<tr id="trSub2"><td>c</td></tr>
<tr id="trMain2"><td>d</td></tr>
<tr id="trMain3" onclick="this.style.backgroundColor='#7DD6F0'"><td>e</td></tr>
<tr id="trMain4" onclick="this.style.backgroundColor='#7DD6F0'"><td>f</td></tr>
<tr id="trSub3" onclick="this.style.backgroundColor='#7DD6F0'"><td>g</td></tr>
<tr id="trSub4" onclick="this.style.backgroundColor='#7DD6F0'"><td>h [click me second.]</td></tr>
</table>

</body>
</html>

------解决方案--------------------

着色的问题，貌似是由IE对表格边框合并有不同解释造成的，加上border-collapse:collapse样式可以解决。IE就是个麻烦啊。
HTML code<table id="tab" border="1" width="200" style="border-collapse:collapse;">

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

table tr 显示的有关问题(疑是IE的BUG)

相关资料更多>

推荐阅读更多>