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>

当我点击更多时，将显示第1行描述。它表现得很好但是colspan不起作用。

这是我的js代码

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

    }
$(document).ready(personalChecking);

提前致谢

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

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');
        }
    });
}

Answer 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

Answer 4

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

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

1是A
2是1位于
3是2位于
4是低于3的TR

但是你的显示器：没有在其中的TD上。

所以我建议：

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

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

Answer 5

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

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

这具有不动画的缺点。我的解决方案可以处理。如果没有，你可以用css（'display'，'table-row'）编写脚本。

-Clint

Answer 6

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

我遇到同样的问题，似乎动画切换不会使COLSPAN的TD出现。我将所有行内容显示在非COLSPAN的列中。当我将其更改为普通切换（）时，一切正常。

Answer 7

最好的方法是使用回调

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

这样FireFox和Chrome就会知道如何正确渲染td

Answer 8

抱歉这是我的错。样式标记应放入 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>

Answer 9

我有过jQuery的问题，并且在过去显示和隐藏/滑动表行，最后我必须让jQuery将选定的td包装在div中，然后显示/隐藏它，不是很好我知道但是在紧迫的截止日期有效。

如果您对动画有类似的问题，请记住一些事项。

td colspan在使用jquery show / hide（）时不起作用

9 个答案: