반응형
표 행에서 slideDown(또는 표시) 기능을 사용하는 방법은 무엇입니까?
테이블에 행을 추가하고 해당 행을 보기 위해 슬라이드를 표시하려고 하는데 슬라이드다운 기능이 테이블 행에 display:block 스타일을 추가하여 레이아웃을 엉망으로 만들고 있는 것 같습니다.
어떻게 해결해야 할지 생각나는 거 있어요?
코드는 다음과 같습니다.
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
테이블 행에서는 애니메이션이 지원되지 않습니다.
Chaffer와 Swedberg의 "Learning jQuery"에서.
브라우저가 표시되는 디스플레이 속성에 대해 서로 다른 값(테이블 행 및 블록)을 사용하기 때문에 테이블 행은 애니메이션에 특정 장애물이 됩니다..hide() 및 .show() 메서드는 애니메이션 없이 테이블 행에 항상 안전하게 사용할 수 있습니다.jQuery 버전 1.1.3부터는 .fadeIn()과 .fadeOut()도 사용할 수 있습니다.
당신은 당신의 td 컨텐츠를 div로 포장하고 그 위에 slideDown을 사용할 수 있습니다.애니메이션이 추가 마크업 가치가 있는지 여부를 결정해야 합니다.
슬라이드 Up/slideDown이 완료되면 Tr을 동적으로 감싼 후 제거합니다.한두 개의 태그를 추가하거나 제거한 다음 애니메이션이 완료되면 태그를 제거하는 것은 상당히 적은 비용이지만, 이 작업을 수행하는 데에는 눈에 보이는 지연이 전혀 보이지 않습니다.
슬라이드 업:
$('#my_table > tbody > tr.my_row')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp(700, function(){
$(this).parent().parent().remove();
});
아래로 슬라이드:
$('#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 의 플러그인을 가져다가 위의 내용으로 되돌려 놓았기 때문에 경의를 표해야 합니다.
여기 제가 작성한 플러그인이 있습니다. 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의 셀 내용을 래핑하고, DIV를 애니메이션화한 다음 제거하며, 반대로 슬라이드 업의 경우에도 마찬가지입니다(셀 패딩을 제거하기 위한 추가 단계 포함).또한 호출한 개체를 반환하므로 다음과 같은 메서드를 체인으로 연결할 수 있습니다.
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red
이것이 누군가에게 도움이 되기를 바랍니다.
저는 행 클릭 시 화면에 들어오고 나가는 숨겨진 행이 있는 테이블이 필요했습니다.
$('.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>행의 내용을 다음과 같이 포장해 볼 수 있습니다.<span> 선택자가 리고당신선택갖을것는권의그것▁your▁be갖▁and▁having는▁selector을.$('#detailed_edit_row span');좀 촌스럽긴 한데, 방금 테스트해봤는데 작동이 되네요.저는 또한 시도했습니다.table-row위의 제안은 효과가 없는 것처럼 보였습니다.
업데이트: 저는 이 문제를 가지고 놀았고, 모든 징후에서 jQuery는 블록 요소가 되기 위해 slideDown을 수행하는 개체가 필요합니다.주사위는 안 돼요.셀에서 slideDown을 사용한 테이블을 떠올릴 수 있었는데 레이아웃에 전혀 영향을 주지 않아서 당신의 테이블이 어떻게 설정되어 있는지 잘 모르겠습니다.제 생각에 당신의 유일한 해결책은 그 세포가 블록이 되어도 괜찮은 방식으로 테이블을 리팩터링하는 것입니다. 아니면 그냥..show();을 빕니다행운을 빌어요.
다음과 같이 행의 내용을 선택합니다.
$(row).contents().slideDown();
.contents() - 텍스트 및 주석 노드를 포함하여 일치하는 요소 집합에서 각 요소의 자식을 가져옵니다.
저는 이것에 대해 대답하는 것이 조금 시대에 뒤떨어졌지만, 그것을 할 방법을 찾았습니다.
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_to_slideup').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});
그것은 td 요소에 css를 사용합니다.높이를 0px로 줄입니다.그런 식으로 각 td 요소 내부에 새로 생성된 div-wrapper의 내용물 높이만 중요합니다.
슬라이드 업이 느립니다.만약 당신이 그것을 더 느리게 한다면, 당신은 약간의 결함을 깨닫게 될 것입니다.처음에 작은 점프.이것은 언급된 css 설정 때문입니다.그러나 이러한 설정이 없으면 행의 높이가 감소하지 않습니다.내용만 그럴 것입니다.
마지막에 트릴 요소가 제거됩니다.
전체 줄에는 JQuery만 포함되며 네이티브 Javascript는 포함되지 않습니다.
도움이 되길 바랍니다.
다음은 예제 코드입니다.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"> </script>
</head>
<body>
<table>
<thead>
<tr>
<th>header_column 1</th>
<th>header column 2</th>
</tr>
</thead>
<tbody>
<tr id="row1"><td>row 1 left</td><td>row 1 right</td></tr>
<tr id="row2"><td>row 2 left</td><td>row 2 right</td></tr>
<tr id="row3"><td>row 3 left</td><td>row 3 right</td></tr>
<tr id="row4"><td>row 4 left</td><td>row 4 right</td></tr>
</tbody>
</table>
<script>
setTimeout(function() {
$('#row2').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});
}, 2000);
</script>
</body>
</html>
중첩된 테이블이 있는 테이블 행:
<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();});
파라미터두번 매수변개째(수▁(▁the변▁second두▁parameterfunction()는 콜백입니다는 콜백입니다.
심플!!
슬라이드 위/아래 기능의 매개 변수로 추가할 수 있는 몇 가지 옵션도 있습니다(가장 일반적인 것은 다음 기간).'slow'그리고.'fast').
행에 있는 td 요소를 사용하여 이 문제를 해결했습니다.
$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);
행 자체를 애니메이션화하면 대부분 비동기 애니메이션 문제와 같은 이상한 동작이 발생합니다.
위의 코드에 대해, 나는 업데이트가 성공했음을 강조하기 위해 테이블에서 끌어다 놓은 행을 강조 표시하고 있습니다.이것이 누군가에게 도움이 되기를 바랍니다.
저는 몸 전체를 슬라이드하고 싶고 페이드 효과와 슬라이드 효과를 결합하여 이 문제를 해결했습니다.
이 작업을 3단계로 수행했습니다(슬라이드 다운 또는 업을 원할 경우 2단계와 3단계가 교체됨).
- tbody에 높이를 할당하는 중입니다.
- 모든 td와 th가 희미해지고,
- 슬라이딩 티바디.
슬라이드 업의 예:
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(행 높이)로 합니다.
행을 다시 숨기려면 div에서 반대 애니메이션을 사용하고 행 높이를 다시 0px로 설정합니다.
비니가 쓰고 있는 플러그인이 마음에 들었습니다.그러나 슬라이딩 행(tr/td) 안에 있는 테이블의 경우, 중첩된 테이블의 행은 슬라이드가 올라간 후에도 항상 숨겨집니다.그래서 저는 중첩된 테이블의 행을 숨기지 않기 위해 플러그인을 빠르고 간단하게 해킹했습니다.다음 행만 변경하면 됩니다.
var $cells = $(this).find('td');
로.
var $cells = $(this).find('> td');
중첩되지 않은 즉시 tds만 찾습니다.플러그인을 사용하는 다른 사용자에게 도움이 되고 중첩된 테이블이 있기를 바랍니다.
#Vinny의 게시물에 댓글을 추가하고 싶지만 담당자가 없어서 답변을 올려야 합니다...
플러그인에서 버그를 발견했습니다. 인수가 있는 개체를 전달하면 다른 인수가 전달되지 않으면 덮어씁니다.인수가 처리되는 순서를 변경하여 쉽게 해결할 수 있습니다. 아래 코드를 참조하십시오.닫힘 후 행을 삭제하는 옵션도 추가했습니다(필요할 때만!).$('#row_id').slideRow('up', true); // 행을 삭제합니다.
(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);
테이블 행을 동시에 슬라이드 및 페이드해야 하는 경우 다음을 사용해 보십시오.
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를 표시하지 않도록 설정하면 가능합니다.
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 요소들을 목표로 했습니다.행을 보여줄 때 그 아이들을 찾았더라면 이것은 괜찮았을 것입니다.그것이 가까워지는 동안, 그들은 모두 "디스플레이: 없음"으로 끝이 났고, 숨겨졌습니다.
- 그것은 아이들의 요소들을 전혀 겨냥하지 않았습니다.
내용이 많은 테이블 셀(예: 행이 많은 중첩 테이블)의 경우 제공된 slideSpeed 값에 관계없이 slideRow('up')를 호출하면 패딩 애니메이션이 완료되자마자 행 보기가 축소됩니다.래핑의 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.togle()을 사용하여 행 또는 앵커를 클릭할 때 행을 표시/숨깁니다.
숨기려는 행을 식별하기 위해 함수를 작성해야 하지만, 토글은 원하는 기능을 만듭니다.
언급URL : https://stackoverflow.com/questions/467336/how-to-use-slidedown-or-show-function-on-a-table-row
반응형
'programing' 카테고리의 다른 글
| 제출 시 확인란 값을 가져오는 중 (0) | 2023.08.15 |
|---|---|
| npm ERR!EEXIST 삭제/코드 거부 (0) | 2023.08.15 |
| 어셈블리(ASP)의 웹 응용 프로그램 버전 번호 사용.NET/C#) (0) | 2023.08.15 |
| 스키마 유효성 검사: 테이블 [게임] 누락 (0) | 2023.08.10 |
| Serilog가 MariaDb 데이터베이스에 로깅되지 않음 (0) | 2023.08.10 |