在 HR 上设置课程会破坏 TD colspan答案

【问题标题】：Setting class on HR breaks TD colspan在 HR 上设置课程会破坏 TD colspan
【发布时间】：2009-09-01 16:01:47
【问题描述】：

我有一个用于显示数据的嵌套表格排列。我希望嵌套表位于跨越所有父表列的 TD 中。所以我设置了colspan。但是，我也希望用户能够单击父级来隐藏/取消隐藏子级数据。这在 IE8 中运行良好，但在 FireFox 和 Chrome 中，嵌套表忽略了 colspan，并且只播种在第一列中。

下面的代码是该问题的一个示例。如果您单击第一列文本，您会明白我的意思。最后一行数据没有分类，因此在页面加载时显示正常，但是一旦设置了类，它就会再次出错。

有什么想法吗？

谢谢。

<!DOCTYPE html PUBLIC "-//W3C//thD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/thD/xhtml1-transitional.thd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script type="text/javascript">
function expandRow(rowID, clickRow)
{
    var item = document.getElementById(rowID);
    if(item.className=='hidden'){
        item.className = 'unhidden';
    }else{
        item.className = 'hidden';
    }
}
</script>
<style type="text/css">
.hidden { display: none; }
.unhidden { display: block; }
</style>
<title>Table Test</title>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="collapsed" onclick="expandRow('id30', this);">Click Here to Expand</td>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
    </tr>
    <tr class="hidden" id="id30">
      <td colspan="4">
        <table>
          <tbody>
            <tr>
              <td>data1</td>
              <td>data2</td>
              <td>data3</td>
              <td>data4</td>
              <td>data5</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td class="collapsed" onclick="expandRow('id95', this);">Click Here to Expand</td>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
    </tr>
    <tr class="hidden" id="id95">
      <td colspan="4">
        <table>
          <tbody>
            <tr>
              <td>data1</td>
              <td>data2</td>
              <td>data3</td>
              <td>data4</td>
              <td>data5</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td class="collapsed" onclick="expandRow('id96', this);">Click Here to Expand</td>
      <td>This one</td>
      <td>displays ok</td>
      <td>until you set the class!</td>
    </tr>
    <tr id="id96">
      <td colspan="4">
        <table>
          <tbody>
            <tr>
              <td>data1</td>
              <td>data2</td>
              <td>data3</td>
              <td>data4</td>
              <td>data5</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

【问题讨论】：

标签： javascript html firefox internet-explorer google-chrome

【解决方案1】：

完全摆脱你的未隐藏类 - 它完全是多余的。取而代之的是从元素中移除隐藏的类，让它返回到它的自然状态，在这种情况下：

item.className = '';

但通常我会建议更换：

item.className = item.className.replace(/\bhidden\b/gi,'');

（而且，我个人认为“删除”在语义上比“隐藏”更正确，我会保留用于处理可见性属性）

【讨论】：

谢谢。解决方案非常明显，我可能会很尴尬，以至于在发布之前我没有想到它。您对使用删除而不是隐藏的评论也很有意义，所以我将同时对其进行排序。

【解决方案2】：

将关于 unhidden 的 css 行更改为：.unhidden { display: table-row; }

block 是 trs 的无效样式。

【讨论】：

如果你这样做，.unhidden 类只对某些元素类型有用，而旧的浏览器将无法识别该值。最好让泛型类在一般情况下有用。

【解决方案3】：

我解决了这个问题，通过声明使用这个信息

.vis {
    display: block; 
    display: table-row;
}

旧 Internet Explorer 会忽略 table-row。 Firefox 和 Internet Explorer 8 使用它。

【讨论】：

【解决方案4】：

只改变这部分 CSS

<style type="text/css">
.hidden { display: none; }
.unhidden { display:; }
</style>

【讨论】：

那是所以不会解析，你只是得到了完全没有规则的效果

【解决方案5】：

您为什么不完全删除样式：

<style type="text/css">
.hidden { display: none; }
.unhidden { }
</style>

【讨论】：