javascript - 在 HR 上设置类别会破坏 TD colspan-6ren

javascript - 在 HR 上设置类别会破坏 TD colspan

转载作者：行者123 更新时间：2023-11-30 23:51:40

24

4

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

最佳答案

完全摆脱你的未隐藏类 - 它完全是多余的。相反，只需从元素中删除隐藏类以使其返回到其自然状态，在本例中:

item.className = '';

但通常我会建议更换:

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

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

关于javascript - 在 HR 上设置类别会破坏 TD colspan，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1363301/

24

4

0

文章推荐： Javascript 选定的 anchor

文章推荐： javascript - 使用 jQuery 的网格大小调整器

文章推荐： javascript - HTML 解析错误

文章推荐： javascript - 如何给id赋值？

tags - 类别、标签或两者兼而有之？
关闭。这个问题是opinion-based .它目前不接受答案。想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 9 个月前关闭。 Improve
r - 如何处理partykit中的大量因素/类别
我使用 partykit打包并遇到以下错误消息: Error in matrix(0, nrow = mi, ncol = nl) : invalid 'nrow' value (too large
python - 有没有办法将维德复合分数分类为情绪水平/类别？
我一直在尝试寻找一个量表或分类指标，为 VADER 情绪分析分配一些情感程度，而不仅仅是积极、消极或中性。如果有人可以分享他们的观点或资源来帮助按以下方式对 VADER 复合分数进行分类，我将非常感激
php - 如何自动循环每个组(类别)
伙计们，我想自动循环..但我不知道是我放错了 while 还是循环错了？我的数据库标签:kt_barang kd_kategori | nama_kategori 1
mysql - 类别、子类别和关键字过滤数据的数据库设计
我正在创建一个列出本地企业并按类别、子类别和关键字对它们进行分组的应用程序。以下是企业排序规则: 一个企业可以属于多个类别和子类别一个企业可以有多个关键字并非每个类别都有子类别，但有子类别的只有两
javascript - 为数组中的元素分配条件/类别
我有一系列单词 - 我的刺激 - 它们显示在屏幕上。然而，每个词都有另一个“条件”，即它们是类别 A、类别 B 或类别 C。这可能很简单，但我找不到答案并坚持下去。我的最终目标是在每次运行脚本时将类别
mysql - 类别、子类别和服务的数据库结构
我正在使用 Laravel 5.5 和 MySql。如果不向 Services 表中添加 subCategoryID 列，我无法弄清楚如何将类别和子类别与服务相关联。目前这是我的表结构服务类别 i
mysql - 更新链接列时复制部分/类别
我有两个部分/类别结构的链接表。 the section table structure id sec_title 1 section 1 2 section 2 the category str
ios - 类别+加载时间问题
我有一个类层次结构如下 @interface PTLDatasource : NSObject ... @interface PTLFetchedDatasource : PTLDatasource
python - 在分类列中有条件地创建一个 "Other"类别
我有一个 DataFrame df 一列，category 使用以下代码创建: import pandas as pd import random as rand from string import
ios - NSManagedObjectContext 类别
我经常在多个类中设置获取请求以从核心数据(加上一些其他结果)中检索“allRecipes”或“lastModifiedDate”。为此使用专门的类别 NSManagedObjectContext+R
IOS 类别 - 可以在类别之间创建依赖关系吗？
可以在 Objective C 中创建类别之间的依赖关系吗？也在类别和它们的基类之间？我知道在运行时应该没有区别，它们可能只是在编译时合并在一起。例如，假设我将 B 类分解为: B(base cla
Objective-C 类别
这个问题在这里已经有了答案: 关闭 10 年前。
javascript - 如何根据用户点击的内容保存信息(类别)
example img of a category selection by user 嘿，我正在尝试设置一个选择，用户必须选择一个类别和第二个类别，但我不知道如何获取他单击的信息。用户单击类别后，它
javascript - 类别/标签选择器
尝试将投资组合库添加到我正在制作的自定义 wp 主题中。我已经筋疲力尽地试图寻找甚至可以修改一些的解决方案和插件。我认为我在寻找解决方案时遇到的一个问题是我不完全确定哪些搜索词可以帮助我找到与我想要实
ios - 同一头文件中的类和类扩展(类别)
当我查看 Cocoa Touch API 时，我可以在同一个头文件中找到一些与类别一起声明的类，例如 @interface NSArray : NSObject @property (readonl
java - log4j 类别
我的 log4j.properties 中有以下内容 log4j.rootLogger = debug, stdout, fileLog log4j.appender.stdout = org.apa
Objective-C 类别
如果我在类中添加类别方法，比如NSXMLNode: @interface NSXMLNode (mycat) - (void)myFunc; @end NSXMLNode 的子类，例如 NSXMLEl
wordpress - 如何检查它是哪个级别的 wordpress 类别？
先说场景，wordpress的分类结构是这样的 Level 1: Top Level 2: -Nextme_1 Level 3: --Nextme_2 --Nextme_3 Leve
python - 浏览 lxml 类别
我有一个解析网络，现在我想浏览标签，或显示图表。我怎样才能得到图表？或者在树中导航。显示第一步然后其他等。并了解这棵树是如何 build 的。 import urllib from lxml impo

首页

博学

6Ren·AI

商城

javascript - 在 HR 上设置类别会破坏 TD colspan