테이블 행에서 슬라이드 타운 (또는 쇼) 기능을 사용하는 방법은 무엇입니까?
https://stackoverflow.com/questions/467336
-
19-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 테이블에 행을 추가하려고 노력하고 그 행을 볼 수 있지만 슬라이드 타운 함수는 디스플레이를 추가하는 것 같습니다.
이 문제를 해결하는 방법이 있습니까?
코드는 다음과 같습니다.
$.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로 감싸고 슬라이드 타운을 사용할 수 있습니다. 애니메이션이 추가 마크 업의 가치가 있는지 결정해야합니다.
다른 팁
슬라이드 업/슬라이드 타운이 완료되면 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에서 셀의 내용을 감싸고 애니메이션을 제거한 다음 제거하며 그 반대도 슬라이드 업을 위해 (셀 패딩을 제거하기위한 몇 가지 추가 단계). 또한 호출 한 객체를 반환하므로 다음과 같은 방법을 체인 할 수 있습니다.
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red
이것이 누군가를 돕기를 바랍니다.
당신은 행의 내용을 <span> 그리고 당신의 선택기가있어 $('#detailed_edit_row span'); - 약간 해킹되지만 방금 테스트했는데 작동합니다. 나는 또한 시도했다 table-row 위의 제안과 작동하지 않는 것 같습니다.
업데이트: 나는이 문제를 가지고 놀았으며, 모든 표시에서 jQuery는 블록 요소가되기 위해 슬라이드 타운을 수행하는 객체가 필요합니다. 그래서 주사위가 없습니다. 나는 셀에서 슬라이드 타운을 사용한 테이블을 만들 수 있었고 레이아웃에 전혀 영향을 미치지 않았으므로 어떻게 설정되어 있는지 잘 모르겠습니다. 나는 당신의 유일한 해결책은 그 셀이 블록이거나 단지 괜찮은 방식으로 테이블을 리팩터링하는 것입니다. .show(); 빌어 먹을 것. 행운을 빕니다.
다음과 같은 행의 내용을 선택하십시오.
$(row).contents().slideDown();
.내용물() - 텍스트 및 주석 노드를 포함하여 일치하는 요소 세트에서 각 요소의 어린이를 가져옵니다.
나는 이것에 대답하는 데 시간이 조금 뒤쳐졌지만, 나는 그것을 할 방법을 찾았다 :)
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가 팽창함에 따라 가시가 설정되면 전체 행이 줄어 듭니다. 그런 다음 테이블 행을 다시 숨기기 전에 다시 퇴색하십시오 (시간 초과 효과가 나타납니다). :)
이것이 누군가를 돕기를 바랍니다!
이 커뮤니티에 초보자입니다. pl 내 대답을 평가합니다. :)
당신은 이것을 잘 찾을 수 있습니다.
나는 테이블이있는 임 (<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);
행 자체를 애니메이션하면 이상한 동작이 발생하며 대부분 비동기 애니메이션 문제가 발생합니다.
위의 코드의 경우, 업데이트가 성공했음을 강조하기 위해 테이블에서 드래그하고 떨어지는 행을 강조하고 있습니다. 이것이 누군가를 돕기를 바랍니다.
나는 행 클릭에서 볼 때까지 미끄러지는 숨겨진 행이있는 테이블을 ned습니다.
$('.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>나는 여기에 제공된 아이디어를 사용했고 몇 가지 문제에 직면했습니다. 나는 그것들을 모두 고쳤고 공유하고 싶은 부드러운 원 라이너가 있습니다.
$('#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 설정 때문입니다. 그러나 이러한 설정이 없으면 행은 높이가 감소하지 않습니다. 콘텐츠 만 할 수 있습니다.
결국 TR 요소가 제거됩니다.
전체 라인에는 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>
나는 전체 tbody를 밀고 싶고 페이드와 슬라이드 효과를 결합 하여이 문제를 관리했습니다.
3 단계 로이 작업을 수행했습니다 (아래로 또는 위로 미끄러지기를 원하는 경우 2 및 3 단계가 교체됩니다).
- TBody에 높이를 할당하고
- 모든 td와 th를 희미하게
- 슬라이딩 tbody.
슬라이드 업의 예 :
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";
}
}
기본적으로 "Invisible"행 0px 높이를 내부에 DIV를 사용하여 만듭니다.
행이 아닌 DIV에서 애니메이션을 사용한 다음 행 높이를 1px로 설정하십시오.
행을 다시 숨기려면 DIV의 반대편 애니메이션을 사용하고 행 높이를 0px로 다시 설정하십시오.
Vinny가 작성하고 사용하고있는 플러그인이 마음에 들었습니다. 그러나 슬라이딩 줄 (TR/TD) 내부의 테이블이있는 경우, 중첩 테이블의 행은 미끄러 져 나간 후에도 항상 숨겨져 있습니다. 그래서 플러그인에서 중첩 테이블의 행을 숨기지 않기 위해 빠르고 간단한 해킹을했습니다. 다음 줄을 변경하십시오
var $cells = $(this).find('td');
에게
var $cells = $(this).find('> td');
중첩 된 TD가 아닌 즉각적인 TD 만 발견합니다. 이것이 플러그인을 사용하고 테이블 중첩을 사용하는 데 도움이되기를 바랍니다.
#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();
}
});
});
Vinny가 제공하는 플러그는입니다 진짜 가까이 있지만 몇 가지 작은 문제를 발견하고 수정했습니다.
- 그것은 은신처의 아이들을 넘어 TD 요소를 탐욕스럽게 목표로 삼았습니다. 그것이 줄을 보여줄 때 그 아이들을 찾았다면 이것은 괜찮 았을 것입니다. 가까이 다가 가면서 그들은 모두 "디스플레이 : 없음"으로 끝났고, 그들을 숨겨 놓았습니다.
- 그것은 어린이 요소를 전혀 타겟팅하지 않았습니다.
제공된 슬라이드 스피드 값에 관계없이 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를 사용하십시오 .비녀장() 행이나 앵커를 클릭하는 행을 보여 주거나 숨기려면.
숨겨져 원하는 행을 식별하려면 함수를 작성해야하지만 토글은 원하는 기능을 만듭니다.
제휴하지 않습니다 StackOverflow
