为表行实现向下滑动 [英] Implementing a slide down for table rows
问题描述
我正在尝试使用上一篇文章实现表格行的向下滑动这里
I am trying to implement a slide down for table rows using the previous post here
我有一个 newrole
表,其中我点击添加图标,它会被添加到 rolecart
表中,每个项目有3行。第一行从角色表中复制,使用jQuery添加下两行,下面是代码。
I have a newrole
table where I click on add icon and it gets added to rolecart
table with 3 rows for each item. First row is copied as it is from the role table the next 2 rows are added using jQuery, below is the code.
$("#table_newrole img.move-row").live("click", function() {
var tr = $(this).closest("tr").remove().clone();
tr.find("img.move-row")
.attr("src", "/gra/images/icons/fugue/cross-circle.png")
.attr("alt", "Remove");
// first row copied from the source table as it is
$("#table_rolecart tbody").append(tr);
// next two rows added like this
var $inputtr = $('<tr><td colspan="3">Business Justification: <input type="text" id="ar_businessjust"></td></tr><tr><td colspan="2">Start Date: <input type="text" id="ar_startdate"></td> <td colspan="1">End Date: <input type="text" id="ar_enddate"></td></tr>');
$("#table_rolecart tbody").append($inputtr);
});
当我将下一个项目添加到购物车时,我希望上一个项目的最后两行向上滑动(I稍后将提供和图标向下滑动以显示这些行)
When I add next item to the cart I want the previous item's last 2 rows to slide up (I will later provide and icon to slide down to show these rows)
需要知道如何实现这一点。更具体地说,我需要知道如何选择最近2行的前一个购物车项目,然后将幻灯片应用于div。
Need to know how to implement this. more specifically I need to know how do I select previous cart items last 2 rows and then apply the slideup to the divs.
推荐答案
//wrap table data in divs
$('tr').not(':first').children('td').wrapInner('<div>');
//slide up spans, then slide up tds in callback
$('button').click( function() {
$('td > div').slideUp(1000, function() {
$(this).parent().slideUp();
});
});
这篇关于为表行实现向下滑动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!