使用jQuery show/hide()时，td colspan不起作用

Question

我有一个目录

<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>

当我点击“更多”后，第一行的描述将会显示。它可以完美地显示，但是colspan不起作用。

以下是我的JS代码：

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

    }
$(document).ready(personalChecking);

感谢您提前的帮助。

- user109332

---

@Sergio - 这个已经四年的问题怎么可能是最近一天的问题的重复呢？ - Ben Koehler

Answer 1

这就是“display:block”的问题所在

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

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

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

- Valli69

---

我不知道你以前是否听说过。但是你有点像英雄。 - MSH

Answer 2

问题似乎出现在显示元素时应用的样式上。它将样式设置为"display:block"，这似乎会影响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');
        }
    });
}

- Ben Koehler

Answer 3

最好的方法是使用回调函数。

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

这样，FireFox和Chrome就会知道如何准确地呈现td。

- Murilo Amaru Gomes

Answer 4

在你的代码中尝试这个：

$('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

- Thomas Stock

Answer 5

问题在于您切换的是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”选择的上下文。

- jwl

---

我遇到了和提问者类似的问题，我在切换一个有colspan属性的TDs的TR。当我切换TR时，我不明白为什么它没有使TDs可见。 - Guy C

我刚刚从使用slideToggle()切换到toggle()，现在它可以正常工作了。似乎使用slideToggle时，TDs不会被显示出来。 - Guy C

实际上，toggle("slow") 也会导致问题。因此，基本上任何动画都会引起问题。 - Guy C

Answer 6

你尝试过不使用动画吗？即只使用toggle()。

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

- Guy C

Answer 7

我发现Firefox的“问题”是因为一个应该有display：table-row的元素。IE的故障似乎是正确的，因为它的故障被解释为标准行为。

因此，最好的解决方案是使用addClass（“someClass”）和removeClass（“someClass”）来隐藏东西。（带有CSS规则：someClass {display:none;}）

这种方法的缺点是没有动画效果。我的解决方案可以处理这个问题。如果不行的话，您可以在css（'display'，'table-row'）中编写脚本。

- Clint

- Clint

Answer 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>

- user109332

Answer 9

我以前在使用jQuery时遇到了显示/隐藏或滑动表格行的问题，最终我不得不让jQuery将选定的td包装在一个div中，然后显示/隐藏它。虽然不太好看，但在紧迫的截止日期下它确实起作用了。

如果您遇到类似的动画问题，这是需要记住的一点。

- Nooshu