Как использовать функцию slideDown (или show) в строке таблицы?
Я пытаюсь добавить строку в таблицу и иметь этот слайд строки в поле зрения, однако функция slidedown, похоже, добавляет стиль display:block в строку таблицы, которая портит макет.
есть идеи, как обойти это?
вот код:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
21 ответов
анимация не поддерживается в строках таблицы.
из "Learning jQuery" Чаффера и Сведберга
строки таблицы присутствуют в частности препятствия для анимации, так как браузеры используйте разные значения (table-row и блок) для их видимого дисплея свойство. Этот.скрывать и. показывать() методы, без анимации, всегда безопасно использовать со строками таблицы. Как jQuery версии 1.1.3, .fadeIn() и .fadeOut() можно использовать как что ж.
вы можете обернуть содержимое td в div и использовать slideDown на этом. Вам нужно решить, стоит ли анимация дополнительной разметки.
Я просто обертываю 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 когда я взял его плагин и раздел его до вышеуказанного, ура товарищ.
вот плагин, который я написал для этого, он занимает немного от реализации Флетча, но мой используется исключительно для скольжения строки вверх или вниз (без вставки строк).
(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
в основном, для анимации скольжения вниз плагин обертывает содержимое ячеек в DIVs, анимирует их, затем удаляет их и наоборот для сдвиньте вверх (с некоторыми дополнительными шагами, чтобы избавиться от заполнения ячейки). Он также возвращает объект, на который вы его вызвали, поэтому вы можете связать методы так:
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red
надеюсь, это кому-то поможет.
вы можете попробовать обернуть содержимое строки в <span> и наличие селектора $('#detailed_edit_row span'); - немного hackish, но я только что протестировал его, и он работает. Я также попробовал table-row предложение выше, и это, похоже, не сработало.
обновление: я играл с этой проблемой, и по всем признакам jQuery нужен объект, который он выполняет slideDown, чтобы быть элементом блока. Да, кости нет. Я смог вызвать стол, где я использовал slideDown на ячейке, и он не повлиял на макет вообще, поэтому я не уверен, как настроен ваш. Я думаю, что единственным выходом является изменить таблицу таким образом, что это нормально, что ячейки блока, или просто .show(); эта проклятая штука. Удача.
Я немного отстаю от времени, отвечая на это, но я нашел способ сделать это:)
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 () - Дети из каждого элемента в наборе совпавших элементов, включая текст и узлов комментариев.
Я новичок в этом сообществе. Pl оцените мой ответ. :)
вы можете найти, что это работает нормально.
im имея таблицу(<table style='display: none;'></table>)
внутри <tr class='dummyRow' style='display: none;'><td></td></tr> содержание.
скользить вниз по ряду..
$('.dummyRow').show().find("table").slideDown();
Примечание: строка и содержимое внутри строки (здесь это table) оба должны быть скрыты до начала анимации.
чтобы скользить вверх по ряду..
$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});
второй параметр(функция) в обратный звонок.
просто!!
Я обошел это, используя элементы td в строке:
$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);
анимация самой строки вызывает странное поведение, в основном проблемы асинхронной анимации.
для приведенного выше кода я выделяю строку, которая перетаскивается в таблицу, чтобы подчеркнуть, что обновление прошло успешно. Надеюсь, это кому-то поможет.
Я хочу скользить по всему телу, и я справился с этой проблемой, объединив эффекты затухания и скольжения.
Я сделал это в 3 этапа (2-й и 3-й шаги заменяются, если вы хотите скользить вниз или вверх)
- назначение высоты элемента tbody,
- исчезают все тд И че,
- раздвижные элемента tbody.
пример slideUp:
tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
tbody.slideUp(300)
});
у меня были проблемы со всеми другими предлагаемыми решениями, но в итоге я сделал эту простую вещь, которая гладкая, как масло.
настройте свой 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.
мне понравился плагин, который Винни написал и использовал. Но в случае таблиц внутри скользящей строки (tr/td) строки вложенной таблицы всегда скрыты даже после скольжения вверх. Поэтому я сделал быстрый и простой взлом в плагине, чтобы не скрывать строки вложенной таблицы. Просто измените следующую строку
var $cells = $(this).find('td');
to
var $cells = $(this).find('> td');
который находит только непосредственные tds не вложенные. Надеюсь, это поможет кому-то использовать плагин и иметь вложенные таблицы.
Я хотел бы добавить комментарий к сообщению #Vinny, но не имею репутации, поэтому должен опубликовать ответ...
нашел ошибку с вашим плагином - когда вы просто передаете объект с аргументами, они перезаписываются, если никакие другие аргументы не передаются. Легко решается путем изменения порядка обработки аргументов, код ниже. Я также добавил опцию для уничтожения строки после закрытия (только так, как мне это было нужно!): $('#row_id').slideRow ('up', true); / / уничтожает row
(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);
я использовал идеи, представленные здесь, и столкнулся с некоторыми проблемами. Я исправил их все, и у меня есть гладкий один лайнер, который я хотел бы поделиться.
$('#row_to_slideup').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});
он использует css для элемента td. Она уменьшает высоту 0px. Таким образом, имеет значение только высота содержимого вновь созданной div-оболочки внутри каждого элемента td.
в slideUp-это медленно. Если вы сделаете это еще медленнее, вы можете понять какой-то глюк. Небольшой скачок в начале. Это из-за УСБ установочный. Но без этих настроек строка не будет уменьшаться в высоту. Только его содержание.
в конце элемент tr удаляется.
вся строка содержит только JQuery и нет собственного Javascript.
надеюсь, что это помогает.
Я neded таблица со скрытыми строками, которые скользят в и из вида на щелчок строки.
$('.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>Если вам нужно скользить и исчезать строку таблицы в то же время, попробуйте использовать следующие:
jQuery.fn.prepareTableRowForSliding = function() {
$tr = this;
$tr.children('td').wrapInner('<div style="display: none;" />');
return $tr;
};
jQuery.fn.slideFadeTableRow = function(speed, easing, callback) {
$tr = this;
if ($tr.is(':hidden')) {
$tr.show().find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
} else {
$tr.find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function(){
$tr.hide();
callback();
});
}
return $tr;
};
$(document).ready(function(){
$('tr.special').hide().prepareTableRowForSliding();
$('a.toggle').toggle(function(){
$button = $(this);
$tr = $button.closest('tr.special'); //this will be specific to your situation
$tr.slideFadeTableRow(300, 'swing', function(){
$button.text('Hide table row');
});
}, function(){
$button = $(this);
$tr = $button.closest('tr.special'); //this will be specific to your situation
$tr.slideFadeTableRow(300, 'swing', function(){
$button.text('Display table row');
});
});
});
function hideTr(tr) {
tr.find('td').wrapInner('<div style="display: block;" />').parent().find('td > div').slideUp(50, function () {
tr.hide();
var $set = jQuery(this);
$set.replaceWith($set.contents());
});
}
function showTr(tr) {
tr.show()
tr.find('td').wrapInner('<div style="display: none;" />').parent().find('td > div').slideDown(50, function() {
var $set = jQuery(this);
$set.replaceWith($set.contents());
});
}
вы можете использовать следующие методы, такие как:
jQuery("[data-toggle-tr-trigger]").click(function() {
var $tr = jQuery(this).parents(trClass).nextUntil(trClass);
if($tr.is(':hidden')) {
showTr($tr);
} else {
hideTr($tr);
}
});
Я могу сделать, если вы установите td в строке для отображения none в то же время вы начинаете анимировать высоту в строке
tbody tr{
min-height: 50px;
}
tbody tr.ng-hide td{
display: none;
}
tr.hide-line{
-moz-transition: .4s linear all;
-o-transition: .4s linear all;
-webkit-transition: .4s linear all;
transition: .4s linear all;
height: 50px;
overflow: hidden;
&.ng-hide { //angularJs specific
height: 0;
min-height: 0;
}
}
этот код работает!
<!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>
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();
}
});
});
вилки, предлагаемых Винни действительно закрыть, но я нашел и исправил пару небольших проблем.
- он жадно нацелился на элементы td за пределами только детей строки, которые скрыты. Это было бы нормально,если бы он тогда искал этих детей, показывая ряд. Пока он приближался, все они заканчивались "display: none" на них, делая их скрытыми.
- он не нацелен на дочерние элементы Th в все.
-
для ячеек таблицы с большим количеством содержимого (например, вложенной таблицы с большим количеством строк), вызывая slideRow ('up'), независимо от предоставленного значения slideSpeed, он свернет представление строки, как только анимация заполнения будет выполнена. Я исправил его, чтобы анимация заполнения не запускалась, пока не будет выполнен метод slideUp() на упаковке.
(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).children('td, th'); $cells.wrapInner('<div class="slideRowUp" />'); var currentPadding = $cells.css('padding'); $cellContentWrappers = $(this).find('.slideRowUp'); $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function(){ $(this).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).children('td, th'); $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);
Быстрое / Легкое Исправление:
Использовать JQuery .toggle () чтобы показать / скрыть строки onclick либо строки или якорь.
функция должна быть написана, чтобы определить строки, которые вы хотели бы скрыть, но toggle создает функциональность, которую вы ищете.