我试图添加一行到一个表，并有一行滑进视图，但滑动功能似乎是添加一个显示:块样式的表行，这打乱了布局。
有什么解决办法吗?
代码如下:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
当前回答
我需要一个表与隐藏的行，滑进和退出对行单击视图。
$('.tr-show-sub').click(function(e) { var elOne = $(this); $('.tr-show-sub').each(function(key, value) { var elTwoe = $(this); if(elOne.get(0) !== elTwoe.get(0)) { if($(this).next('.tr-sub').hasClass('tr-sub-shown')) { elTwoe.next('.tr-sub').removeClass('tr-sub-shown'); elTwoe.next('tr').find('td').find('div').slideUp(); elTwoe.next('tr').find('td').slideUp(); } } if(elOne.get(0) === elTwoe.get(0)) { if(elOne.next('.tr-sub').hasClass('tr-sub-shown')) { elOne.next('.tr-sub').removeClass('tr-sub-shown'); elOne.next('tr').find('td').find('div').slideUp(); elOne.next('tr').find('td').slideUp(); } else { elOne.next('.tr-sub').addClass('tr-sub-shown'); elOne.next('tr').find('td').slideDown(); elOne.next('tr').find('td').find('div').slideDown(); } } }) }); body { background: #eee; } .wrapper { margin: auto; width: 50%; padding: 10px; margin-top: 10%; } table { background: white; width: 100%; } table th { background: gray; text-align: left; } table th, td { border-bottom: 1px solid lightgray; padding: 5px; } table .tr-show-sub { background: #EAEAEA; cursor: pointer; } table .tr-sub td { display: none; } table .tr-sub td .div-sub { display: none; } <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <div class="wrapper"> <table cellspacing="0" cellpadding="3"> <thead> <tr class="table"> <th>col 1</th> <th>col 2</th> <th>col 3</th> </tr> </thead> <tbody> <tr class="tr-show-sub"> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr class="tr-sub"> <td colspan="5"><div class="div-sub"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem. </div></td> </tr> <tr class="tr-show-sub"> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr class="tr-sub"> <td colspan="5"><div class="div-sub"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem. </div></td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> </tbody> </table> </div>
其他回答
我想对#Vinny的帖子加一条评论，但没有代表，所以不得不发表一个答案…
在你的插件中发现了一个错误——当你只传入一个带参数的对象时，如果没有传入其他参数，它们就会被覆盖。通过改变参数处理的顺序很容易解决，代码如下。 我还添加了一个关闭后销毁行的选项(只是因为我需要它!):$('#row_id')。slideRow(“向上”,真正的);//销毁行
(function ($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false,
destroyAfterUp: false
},
methods: {
up: function (arg1, arg2, arg3) {
if (typeof arg2 == 'string') {
sR.thisCallArgs.easing = arg2;
} else if (typeof arg2 == 'function') {
sR.thisCallArgs.callback = arg2;
} else if (typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if (typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
} else if (typeof arg3 == 'undefined' && typeof arg2 != 'function') {
sR.thisCallArgs.callback = sR.defaults.callback;
}
if (typeof arg1 == 'object') {
for (p in arg1) {
sR.thisCallArgs[p] = arg1[p];
}
} else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
} else if (typeof arg1 != 'undefined' && (typeof arg1 == 'boolean')) {
sR.thisCallArgs.destroyAfterUp = arg1;
} else {
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
var $row = $(this);
var $cells = $row.children('th, td');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing).parent().animate({
paddingTop: '0px',
paddingBottom: '0px'
}, {
complete: function () {
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({ 'display': 'none' });
$(this).css({ 'padding': currentPadding });
}
});
var wait = setInterval(function () {
if ($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if (sR.thisCallArgs.destroyAfterUp)
{
$row.replaceWith('');
}
if (typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1, arg2, arg3) {
if (typeof arg2 == 'string') {
sR.thisCallArgs.easing = arg2;
} else if (typeof arg2 == 'function') {
sR.thisCallArgs.callback = arg2;
} else if (typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if (typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
} else if (typeof arg3 == 'undefined' && typeof arg2 != 'function') {
sR.thisCallArgs.callback = sR.defaults.callback;
}
if (typeof arg1 == 'object') {
for (p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
} else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
} else {
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
var $cells = $(this).children('th, td');
$cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function () { $(this).replaceWith($(this).contents()); });
var wait = setInterval(function () {
if ($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if (typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function (method, arg1, arg2, arg3) {
if (typeof method != 'undefined') {
if (sR.methods[method]) {
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
}
};
})(jQuery);
我通过使用行中的td元素来解决这个问题:
$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);
动画行本身会导致奇怪的行为，主要是异步动画问题。
对于上面的代码，我突出显示了在表中拖放的一行，以突出显示更新已经成功。希望这能帮助到一些人。
您可以尝试将行内容包装在<span>中，并让您的选择器为$('#detailed_edit_row span');-有点粗糙，但我刚刚测试过，它是有效的。我还尝试了上面的表行建议，但它似乎不起作用。
更新:我一直在研究这个问题，从所有迹象来看，jQuery需要它执行slideDown的对象是一个块元素。所以，不可能。我能够变出一个表，我在一个单元格上使用滑下来，它不影响布局，所以我不确定你是如何设置的。我认为你唯一的解决方案是重构表，以这样一种方式，即单元格是一个块，或者只是.show();该死的东西。祝你好运。
我想滑动整个身体，我已经通过结合褪色和滑动效果来管理这个问题。
我已经完成了3个阶段(第2步和第3步被替换，以防你想向下或向上滑动)
给身体指定高度， 褪色所有td和th， tbody下滑。
slideUp的例子:
tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
tbody.slideUp(300)
});
我喜欢Vinny写的插件，并一直在使用。但是对于在滑动行(tr/td)内的表，即使在滑动后，嵌套表的行始终是隐藏的。所以我做了一个快速和简单的hack在插件不隐藏行嵌套表。只要改一下下面这行
var $cells = $(this).find('td');
to
var $cells = $(this).find('> td');
它只找到直接的TDS而不是嵌套的。希望这有助于使用插件和嵌套表的人。
推荐文章
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- jQuery:执行同步AJAX请求
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 如何停止事件冒泡复选框点击
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何删除和清除所有的本地存储数据
- 如何修改标签文本?
- 如何获得十六进制颜色值而不是RGB值?
- 如何将一个标题转换为jQuery的URL段塞?
- $(window).width()与媒体查询不一样
- AJAX请求中的内容类型和数据类型是什么?
- 如何打破_。在underscore.js中的每个函数
- 如何在jQuery中获得当前日期?
