我试图添加一行到一个表,并有一行滑进视图,但滑动功能似乎是添加一个显示:块样式的表行,这打乱了布局。
有什么解决办法吗?
代码如下:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
我试图添加一行到一个表,并有一行滑进视图,但滑动功能似乎是添加一个显示:块样式的表行,这打乱了布局。
有什么解决办法吗?
代码如下:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
当前回答
我喜欢Vinny写的插件,并一直在使用。但是对于在滑动行(tr/td)内的表,即使在滑动后,嵌套表的行始终是隐藏的。所以我做了一个快速和简单的hack在插件不隐藏行嵌套表。只要改一下下面这行
var $cells = $(this).find('td');
to
var $cells = $(this).find('> td');
它只找到直接的TDS而不是嵌套的。希望这有助于使用插件和嵌套表的人。
其他回答
我回答这个问题有点落后了,但我找到了一种方法来做到这一点:)
function eventinfo(id) {
tr = document.getElementById("ei"+id);
div = document.getElementById("d"+id);
if (tr.style.display == "none") {
tr.style.display="table-row";
$(div).slideDown('fast');
} else {
$(div).slideUp('fast');
setTimeout(function(){tr.style.display="none";}, 200);
}
}
我只是在表格数据标记中放了一个div元素。当它被设置为可见时,随着div展开,整行就会下降。 然后告诉它渐隐(然后超时,以便您看到效果),然后再次隐藏表行:)
希望这能帮助到一些人!
像这样选择行内容:
$(row).contents().slideDown();
.contents () - 获取匹配元素集中每个元素的子元素,包括文本节点和注释节点。
这段代码有效!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title></title>
<script>
function addRow() {
$('.displaynone').show();
$('.displaynone td')
.wrapInner('<div class="innerDiv" style="height:0" />');
$('div').animate({"height":"20px"});
}
</script>
<style>
.mycolumn{border: 1px solid black;}
.displaynone{display: none;}
</style>
</head>
<body>
<table align="center" width="50%">
<tr>
<td class="mycolumn">Row 1</td>
</tr>
<tr>
<td class="mycolumn">Row 2</td>
</tr>
<tr class="displaynone">
<td class="mycolumn">Row 3</td>
</tr>
<tr>
<td class="mycolumn">Row 4</td>
</tr>
</table>
<br>
<button onclick="addRow();">add</button>
</body>
</html>
我简单地动态包装tr,然后删除它一旦slideUp/slideDown已经完成。这是一个非常小的开销添加和删除一个或两个标签,然后删除它们一旦动画完成,我没有看到任何可见的延迟。
SlideUp:
$('#my_table > tbody > tr.my_row')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp(700, function(){
$(this).parent().parent().remove();
});
SlideDown:
$('#my_table > tbody > tr.my_row')
.find('td')
.wrapInner('<div style="display: none;" />')
.parent()
.find('td > div')
.slideDown(700, function(){
var $set = $(this);
$set.replaceWith($set.contents());
});
我不得不向fletchzone.com致敬,因为我拿走了他的插件,并将其剥离到上面。
快速、简单的解决办法:
使用JQuery .toggle()显示/隐藏行点击或锚。
需要编写一个函数来识别想要隐藏的行,但是toggle可以创建您正在寻找的功能。