td colspan 在使用 jquery show/hide() 时不起作用答案

【问题标题】：td colspan does not work while using jquery show/hide()td colspan 在使用 jquery show/hide() 时不起作用
【发布时间】：2018-06-15 20:48:40
【问题描述】：

我有一个目录

<table>
<thead>
  <tr>
    <th>First Name </th>
    <th>Last Name </th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr class="odd">
    <td>John</td>
    <td>Deo</td>
    <td><a class="personal-checking-more-link">More</a></td>
  </tr>
  <tr><td style="display:none" colspan="3">Description goes for 1st row</td></tr>
  <tr class="odd">
    <td>Jaden</td>
    <td>Aidan</td>
    <td><a class="personal-checking-more-link">More</a></td>
  </tr>
  <tr><td style="display:none" colspan="3">Description goes for 2nd row</td></tr>
</tbody>

当我点击 More 时，将显示第一行描述。它显示完美，但 colspan 不起作用。

这是我的js代码

personalChecking = function () {
        $('a.personal-checking-more-link').click(function() {
            $(this).parent().parent().next().toggle('slow');
        });

    }
$(document).ready(personalChecking);

提前致谢

【问题讨论】：

@Sergio - 这个 4 岁的问题如何与一天前的问题重复？

标签： jquery

【解决方案1】：

这是 'display:block' 的问题

请参考以下链接 http://thedesignspace.net/MT2archives/000376.html#.UUrg3FfCd1u

如果您要隐藏 tr，则使用 'display:table-row' 而不是 'display:block' 来显示该 tr，

如果要隐藏 td，则使用 'display:table-cell' 而不是 'display:block' 来显示该 td

【讨论】：

【解决方案2】：

问题似乎在于显示元素时应用的样式。它将样式设置为“显示：块”，这似乎与 colspan 混淆。以下是我想出的一些解决方法，但它们并不完美。

这个有生涩的动画：

personalChecking = function () {
    $('a.personal-checking-more-link').click(function() {
        $(this).parent().parent().next().toggle('slow', function() {
            if($(this).css('display') == 'block')
            {
                $(this).css('display', '');
            }               
        });
    });
}

而这个根本没有动画：

personalChecking = function () {
    $('a.personal-checking-more-link').click(function() {
        var nextRow = $(this).parent().parent().next();
        if(nextRow.css('display') == 'none')
        {
            nextRow.css('display','');
        }
        else
        {
            nextRow.css('display', 'none');
        }
    });
}

【讨论】：

【解决方案3】：

在你的代码中试试这个：

$('a.personal-checking-more-link').click(function() {
    var descriptionTR = $(this).parent().parent().next();
    $(descriptionTR).toggle('slow').colSpan = 3;
});

http://www.nabble.com/IE7:-Setting-ColSpan-as-Attribute-td21252688s27240.html

【讨论】：

【解决方案4】：

问题是您正在切换 TR，而不是其中的 TD

$(this).parent().parent().next()
   1      2         3       4

1 是 A
2 是 1 所在的 TD
3是2所在的TR
4 是低于 3 的 TR

但是你的 display:none 不在 TD 上。

所以我会推荐：

$("td",$(this).parent().parent().next()).toggle('slow');

内部 $ 将为您提供包含 TR，然后您将其用作“td”选择的上下文。

【讨论】：

我遇到了与提问者类似的问题，我正在切换一个具有 colspan'ed TDs 的 TR。当我切换 TR 时，我不明白为什么它没有使 TD 可见。
我刚刚从使用 slideToggle() 切换到 toggle()，现在它可以工作了。似乎使用 slideToggle 不会显示 TD
事实上，toggle("slow") 也破坏了一些东西。所以基本上任何动画都会导致问题

【解决方案5】：

我发现 firefox 的“问题”是因为 a 应该有 display:table-row。 IE 的故障似乎是正确的，因为它的故障被解释为标准行为。

所以最好的解决方案是使用 addClass("someClass") 和 removeClass("someClass") 来隐藏东西。（使用 CSS 规则：someClass {display:none;}）

这有没有动画的缺点。我的解决方案可以解决这个问题。如果没有，您可以以某种方式在 css('display','table-row') 中编写脚本。

-克林特

【讨论】：

【解决方案6】：

你试过没有动画吗？即只是切换（）

我遇到了同样的问题，动画切换似乎没有使 COLSPAN 的 TD 出现。我的所有行内容都出现在非 COLSPAN 的列之一中。当我将其更改为普通的 toggle() 时，一切正常。

【讨论】：

【解决方案7】：

最好的方法是使用回调

personalChecking = function () {
    $('a.personal-checking-more-link').click(function() {
        $(this).parent().parent().next().show('slow', function() {           
            $(this).attr("colspan", "3");
        });
    });
}

这样，FireFox 和 Chrome 将知道如何准确地渲染 td

【讨论】：

【解决方案8】：

对不起，这是我的错误。 style 标签应该放在 TR 而不是 TD

  <tr style="display:none"><td colspan="3">Description goes for 1st row</td></tr>
  <tr style="display:none"><td colspan="3">Description goes for 2nd row</td></tr>

【讨论】：

【解决方案9】：

过去我在使用 jQuery 以及显示和隐藏/滑动表格行时遇到了问题，最后我不得不让 jQuery 将选定的 td 包装在一个 div 中，然后显示/隐藏它，我知道这不太好，但在时间紧迫，它奏效了。

如果您在动画中遇到类似问题，请记住一些事情。

【讨论】：