Question

我有一个用于显示数据的嵌套表格排列。我希望嵌套表位于跨越所有父表列的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>

Answer 1

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

block是trs的无效样式。

Answer 2

完全摆脱你的隐藏课程 - 这完全是多余的。而只是从元素中删除隐藏的类以允许它返回到它的自然状态，在这种情况下：

item.className = '';

但通常我会建议更换：

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

（和fwiw，我个人发现“删除”在语义上比“隐藏”更正确，我会保留用于处理可见性属性）

Answer 3

我通过声明

使用此信息解决了它

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

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

Answer 4

只更改CSS的这一部分

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

Answer 5

为什么不完全删除样式：

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

在HR上设置类会破坏TD colspan

5 个答案: