我试图添加一行到一个表，并有一行滑进视图，但滑动功能似乎是添加一个显示:块样式的表行，这打乱了布局。
有什么解决办法吗?
代码如下:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
当前回答
我对所有其他的解决方案都有问题，但最后还是做了这个简单的事情，非常顺利。
像这样设置你的HTML:
<tr id=row1 style='height:0px'><td>
<div id=div1 style='display:none'>
Hidden row content goes here
</div>
</td></tr>
然后像这样设置你的javascript:
function toggleRow(rowid){
var row = document.getElementById("row" + rowid)
if(row.style.height == "0px"){
$('#div' + rowid).slideDown('fast');
row.style.height = "1px";
}else{
$('#div' + rowid).slideUp('fast');
row.style.height = "0px";
}
}
基本上，让“隐形”行高0px，里面有一个div。 使用div(不是行)上的动画，然后设置行高为1px。
为了再次隐藏行，在div上使用相反的动画，并将行高设置为0px。
其他回答
我回答这个问题有点落后了，但我找到了一种方法来做到这一点:)
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展开，整行就会下降。 然后告诉它渐隐(然后超时，以便您看到效果)，然后再次隐藏表行:)
希望这能帮助到一些人!
有一个表行嵌套表:
<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())是一个回调。
简单! !
请注意，还有几个选项可以添加为滑动上/下函数的参数(最常见的是“慢”和“快”的持续时间)。
快速、简单的解决办法:
使用JQuery .toggle()显示/隐藏行点击或锚。
需要编写一个函数来识别想要隐藏的行，但是toggle可以创建您正在寻找的功能。
我想对#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);
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中获得当前日期?
