我试图添加一行到一个表，并有一行滑进视图，但滑动功能似乎是添加一个显示:块样式的表行，这打乱了布局。
有什么解决办法吗?
代码如下:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
当前回答
这是我为此编写的一个插件，它从Fletch的实现中获得了一些，但我的插件仅用于上下滑动一行(不插入行)。
(function($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false
},
methods: {
up: function (arg1,arg2,arg3) {
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;
}
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;
}
var $cells = $(this).find('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(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1,arg2,arg3) {
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;
}
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;
}
var $cells = $(this).find('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);
基本用法:
$('#row_id').slideRow('down');
$('#row_id').slideRow('up');
将幻灯片选项作为单独的参数传递:
$('#row_id').slideRow('down', 500); //slide speed
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as object
基本上，对于向下滑动动画，插件将单元格的内容包装在div中，对它们进行动画化，然后删除它们，对于向上滑动亦然(使用一些额外的步骤来消除单元格填充)。它还返回你调用它的对象，所以你可以像这样链接方法:
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red
希望这能帮助到一些人。
其他回答
我通过使用行中的td元素来解决这个问题:
$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);
动画行本身会导致奇怪的行为，主要是异步动画问题。
对于上面的代码，我突出显示了在表中拖放的一行，以突出显示更新已经成功。希望这能帮助到一些人。
像这样选择行内容:
$(row).contents().slideDown();
.contents () - 获取匹配元素集中每个元素的子元素，包括文本节点和注释节点。
我需要一个表与隐藏的行，滑进和退出对行单击视图。
$('.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>
有一个表行嵌套表:
<tr class='dummyRow' style='display: none;'>
<td>
<table style='display: none;'>All row content inside here</table>
</td>
</tr>
向下滑动行:
$('.dummyRow').show().find("table").slideDown();
注意:行和它的内容(这里是“table”)都应该在动画开始之前被隐藏。
上滑行:
$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});
第二个参数(function())是一个回调。
简单! !
请注意，还有几个选项可以添加为滑动上/下函数的参数(最常见的是“慢”和“快”的持续时间)。
http://jsfiddle.net/PvwfK/136/
<table cellspacing='0' cellpadding='0' class='table01' id='form_table' style='width:100%;'>
<tr>
<td style='cursor:pointer; width:20%; text-align:left;' id='header'>
<label style='cursor:pointer;'> <b id='header01'>▲ Customer Details</b>
</label>
</td>
</tr>
<tr>
<td style='widtd:20%; text-align:left;'>
<div id='content' class='content01'>
<table cellspacing='0' cellpadding='0' id='form_table'>
<tr>
<td>A/C ID</td>
<td>:</td>
<td>3000/A01</td>
</tr>
<tr>
<td>A/C ID</td>
<td>:</td>
<td>3000/A01</td>
</tr>
<tr>
<td>A/C ID</td>
<td>:</td>
<td>3000/A01</td>
</tr>
</table>
</div>
</td>
</tr>
$(function () {
$(".table01 td").on("click", function () {
var $rows = $('.content01');
if ($(".content01:first").is(":hidden")) {
$("#header01").text("▲ Customer Details");
$(".content01:first").slideDown();
} else {
$("#header01").text("▼ Customer Details");
$(".content01:first").slideUp();
}
});
});
推荐文章
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- jQuery:执行同步AJAX请求
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 如何停止事件冒泡复选框点击
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何删除和清除所有的本地存储数据
- 如何修改标签文本?
- 如何获得十六进制颜色值而不是RGB值?
- 如何将一个标题转换为jQuery的URL段塞?
- $(window).width()与媒体查询不一样
- AJAX请求中的内容类型和数据类型是什么?
- 如何打破_。在underscore.js中的每个函数
- 如何在jQuery中获得当前日期?
