我有一张内容表
<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);
提前致谢
答案 0 :(得分:5)
这是'display:block'
的问题请参阅以下链接 http://thedesignspace.net/MT2archives/000376.html#.UUrg3FfCd1u
如果你隐藏tr,那么使用'display:table-row'而不是'display:block'来显示tr,
如果你隐藏了td,那么使用'display:table-cell'代替'display:block'来显示td
答案 1 :(得分:4)
问题似乎是在显示元素时应用的样式。它将样式设置为“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');
}
});
}
答案 2 :(得分:2)
在您的代码中尝试此操作:
$('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
答案 3 :(得分:2)
问题是你正在切换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”选择的上下文。
答案 4 :(得分:2)
我发现firefox'问题'是因为a应该有display:table-row。 IE的故障似乎正确,因为它的故障被解释为标准行为。
所以最好的解决方案是使用addClass(“someClass”)和removeClass(“someClass”)来隐藏东西。 (使用CSS规则:someClass {display:none;})
这具有不动画的缺点。我的解决方案可以处理。如果没有,你可以用css('display','table-row')编写脚本。
-Clint
答案 5 :(得分:2)
你没有动画吗?即只是切换()
我遇到同样的问题,似乎动画切换不会使COLSPAN的TD出现。我将所有行内容显示在非COLSPAN的列中。当我将其更改为普通切换()时,一切正常。
答案 6 :(得分:2)
最好的方法是使用回调
personalChecking = function () {
$('a.personal-checking-more-link').click(function() {
$(this).parent().parent().next().show('slow', function() {
$(this).attr("colspan", "3");
});
});
}
这样FireFox和Chrome就会知道如何正确渲染td
答案 7 :(得分:1)
抱歉这是我的错。 样式标记应放入 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>
答案 8 :(得分:0)
我有过jQuery的问题,并且在过去显示和隐藏/滑动表行,最后我必须让jQuery将选定的td包装在div中,然后显示/隐藏它,不是很好我知道但是在紧迫的截止日期有效。
如果您对动画有类似的问题,请记住一些事项。