어떻게 사용 slideDown (또는 쇼) 테이블 행에 함수?

해결법

1.애니메이션이 테이블 행에서 지원되지 않습니다.

애니메이션이 테이블 행에서 지원되지 않습니다.

에누리 및 Swedberg하여 "학습 jQuery를"에서

당신은 사업부에서 TD 내용을 포장하고에 slideDown를 사용할 수 있습니다. 당신은 애니메이션이 추가 마크 업 가치가 있는지 결정해야합니다.
2.나는 간단히 동적으로 TR을 감싸는 slideUp / 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에 경의를 가지고, 환호는 짝.

3.여기에 플러그 - 인의 나는이를 위해 쓴, 그것은 플레처의 구현에서 조금 걸리지 만 광산 (더 행을 삽입) 아래에만 행을 위하기 위해 사용하거나됩니다.

여기에 플러그 - 인의 나는이를 위해 쓴, 그것은 플레처의 구현에서 조금 걸리지 만 광산 (더 행을 삽입) 아래에만 행을 위하기 위해 사용하거나됩니다.

(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

이 사람을 도움이되기를 바랍니다.

4.당신은 에서 행의 내용을 포장하고 선택기 $ ( '#의 detailed_edit_row 기간')이 될 필요 시도해 볼 수도 있습니다; - 비트 hackish,하지만 난 그냥 그것을 테스트하고 그것을 작동합니다. 또한 위의 표 행의 제안을 시도하고 작동하지 않았다.

당신은 에서 행의 내용을 포장하고 선택기 $ ( '#의 detailed_edit_row 기간')이 될 필요 시도해 볼 수도 있습니다; - 비트 hackish,하지만 난 그냥 그것을 테스트하고 그것을 작동합니다. 또한 위의 표 행의 제안을 시도하고 작동하지 않았다.

업데이트 :이 문제를 해본 결과, 모든 표시에서 jQuery를이 블록 요소로에가 slideDown을 수행하는 객체를 필요로한다. 그래서, 아니 주사위입니다. 내가 셀에 slideDown를 사용하고 전혀 레이아웃에 영향을 미치지 않았다 어디 그래서 나는 확실히 당신이 설정 한 방법 아닙니다, 테이블을 연상 할 수 있었다. 나는 당신의 유일한 해결책은 해당 셀과 그것의 확인이 차단되고, 아니면 그냥 .show () 것과 같은 방식으로 표를 리팩토링하는 생각; 망할 것. 행운을 빕니다.
5.이 같은 행의 내용을 선택합니다 :

이 같은 행의 내용을 선택합니다 :
```
$(row).contents().slideDown();
```
.contents () - 텍스트 및 주석 노드를 포함하여 일치하는 요소의 세트에 각 요소의 아이를 가져옵니다.
6.나는이 대답에 시간 뒤에 조금 해요,하지만 난 그것을 할 수있는 방법을 발견 :)

나는이 대답에 시간 뒤에 조금 해요,하지만 난 그것을 할 수있는 방법을 발견 :)
```
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 요소를 넣어. 그것은 눈에 보이는 설정되어있는 경우, 사업부가 확장으로, 전체 행이 내려 온다. 다음 백업 페이드하도록 지시 (다음 시간 제한이 효과를 볼 수 있도록) 다시 테이블 행을 숨기기 전에 :)

이 사람을 도움이되기를 바랍니다!
7.나는 숨겨진 행이있는 테이블을 필요로하는 슬라이드 및 행 클릭에보기 중.

나는 숨겨진 행이있는 테이블을 필요로하는 슬라이드 및 행 클릭에보기 중.

$ ( '. TR-쇼 - 서브'). {() 함수 (예를 클릭합니다 VAR elOne = $ (이); $ ( '. TR 쇼 서브'). 각 (함수 (키 값) { VAR elTwoe는 $ (이) =; 경우 (elOne.get (0)! == elTwoe.get (0)) { 경우 ($ (이) 다음 내용 ( '. TR 서브'). hasClass ( "TR-서브 도시 ')) { elTwoe.next ( "TR-SUB. ') removeClass ("TR-서브 도시.'); . elTwoe.next ( 'TR') ( 'TD')를 찾을 수 있습니다 ( 'DIV')를 찾을 수 slideUp ()..; . elTwoe.next ( 'TR') ( 'TD') 찾을 수 slideUp ().; } } 경우 (elOne.get (0) === elTwoe.get (0)) { 경우 (elOne.next ( '. TR 서브'). hasClass ( "TR-서브 도시 ')) { elOne.next ( "TR-SUB. ') removeClass ("TR-서브 도시.'); . elOne.next ( 'TR') ( 'TD')를 찾을 수 있습니다 ( 'DIV')를 찾을 수 slideUp ()..; . elOne.next ( 'TR') ( 'TD') 찾을 수 slideUp ().; } 다른 { elOne.next ( "TR-SUB. ') addClass ("TR-서브 도시.'); . elOne.next ( 'TR') ( 'TD') 찾을 수 slideDown ().; . elOne.next ( 'TR') ( 'TD')를 찾을 수 있습니다 ( 'DIV')를 찾을 수 slideDown ()..; } } }) }); 몸 { 배경 : #eee; } .wrapper { 마진 : 자동; 폭 : 50 %; 패딩 : 10px; 마진 탑 : 10 %; } 테이블 { 배경 : 흰색; 폭 : 100 %; } 테이블 일 { 배경 : 회색; 텍스트 정렬은 : 왼쪽; } 표 번째 TD { 국경 바닥 : 1 픽셀의 고체 lightgray; 패딩 : 5px; } 테이블 .TR 쇼 서브 { 배경 : #EAEAEA; 커서 : 포인터; } 테이블 .TR 서브 TD { 표시 : 없음; } 표 .TR 서브 .div TD-SUB { 표시 : 없음; } <스크립트 SRC = "https://code.jquery.com/jquery-3.2.1.js">
<표 cellspacing = "0"의 cellpadding = "3"> <제> COL 1 <제> COL 2 <제> COL 3 COL 1 COL 2 COL 3
로렘 입숨 슬픔 앉아 AMET, consectetur adipiscing ELIT. 현미경 템퍼의 rhoncus AMET 앉아 tortor 음주 운전 auctor. Etiam scelerisque ligula ID ligula congue 언제나 interdum에서 neque. 도박의 condimentum 아이디 nibh 교류 pretium. Proin dapibus nibh. Suspendisse quis ELIT volutpat, aliquet에 NiSi 등, rhoncus quam. Quisque NEC 전 quis DIAM tristique hendrerit. Nullam sagittis metus SEM, placerat scelerisque 슬픔 congue 유럽 연합 (EU). Pellentesque ultricies 푸 루스 turpis, convallis congue 고양이 속 iaculis 나오지. CRAS 언제나 elementum nibh 언제나에서. Suspendisse 리베로 augue, auctor facilisis tincidunt eget, suscipit 유럽 연합 (EU)의 ligula. 전 facilisis의 tincidunt에서 DIAM에서 남. Fusce erat enim, placerat 교류 마사 facilisis, 템퍼 aliquet metus. Fusce placerat nulla 나오지 tristique tincidunt. 음주 운전 vulputate 베팅 리베로, NEC lobortis ELIT ornare VEL. Mauris imperdiet nulla 비 suscipit cursus. ELIT rutrum 몰리스 SED SED 나오지도 음주 운전 교류는 AMET가 lorem 앉아. COL 1 COL 2 COL 3
로렘 입숨 슬픔 앉아 AMET, consectetur adipiscing ELIT. 현미경 템퍼의 rhoncus AMET 앉아 tortor 음주 운전 auctor. Etiam scelerisque ligula ID ligula congue 언제나 interdum에서 neque. 도박의 condimentum 아이디 nibh 교류 pretium. Proin dapibus nibh. Suspendisse quis ELIT volutpat, aliquet에 NiSi 등, rhoncus quam. Quisque NEC 전 quis DIAM tristique hendrerit. Nullam sagittis metus SEM, placerat scelerisque 슬픔 congue 유럽 연합 (EU). Pellentesque ultricies 푸 루스 turpis, convallis congue 고양이 속 iaculis 나오지. CRAS 언제나 elementum nibh 언제나에서. Suspendisse 리베로 augue, auctor facilisis tincidunt eget, suscipit 유럽 연합 (EU)의 ligula. 전 facilisis의 tincidunt에서 DIAM에서 남. Fusce erat enim, placerat 교류 마사 facilisis, 템퍼 aliquet metus. Fusce placerat nulla 나오지 tristique tincidunt. 음주 운전 vulputate 베팅 리베로, NEC lobortis ELIT ornare VEL. Mauris imperdiet nulla 비 suscipit cursus. ELIT rutrum 몰리스 SED SED 나오지도 음주 운전 교류는 AMET가 lorem 앉아. COL 1 COL 2 COL 3
8.중첩 테이블과 테이블 행을 가지고 :

중첩 테이블과 테이블 행을 가지고 :
```
<tr class='dummyRow' style='display: none;'>
    <td>
        <table style='display: none;'>All row content inside here</table>
    </td>
</tr>
```
```
$('.dummyRow').show().find("table").slideDown();
```
참고 : 행과의 내용은 모두 애니메이션이 시작되기 전에 숨겨져 야 (여기가 "테이블"입니다).
```
$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});
```
두번째 파라미터 (함수 ()) 콜백이다.

단순한!!

기능 아래로 슬라이드 업의 매개 변수로 추가 할 수있는 몇 가지 옵션 /도있다하는 것으로 (가장 일반적인 존재 기간 '빠르게' '느린'등).
9.나는 행의 TD 요소를 사용하여이 문제를 입수했습니다 :

나는 행의 TD 요소를 사용하여이 문제를 입수했습니다 :
```
$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);
```
행 자체를 애니메이션은 주로 애니메이션 문제 비동기, 이상한 동작이 발생합니다.

위의 코드를 위해, 나는 끌고와 업데이트가 성공했다고 강조 표에 주위 h 제될 행을 강조하고있다. 이 사람을 도움이되기를 바랍니다.

10.나는 여기에 제공하고 몇 가지 문제에 직면 아이디어를 사용했다. 나는 그들 모두를 고정 내가 공유하고 싶은 부드러운 한 줄이있다.

나는 여기에 제공하고 몇 가지 문제에 직면 아이디어를 사용했다. 나는 그들 모두를 고정 내가 공유하고 싶은 부드러운 한 줄이있다.

$('#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를 사용합니다. 그것은 0 픽셀 행의 높이를 감소시킨다. 그런 식으로 각각의 TD 요소 문제의 새로 만든 DIV - 래퍼 내부의 내용의 높이.

slideUp 느린에 있습니다. 당신이 만드는 경우도 느린 당신은 몇 가지 결함을 실현할 수 있습니다. 처음에 작은 점프. 이 때문에 언급 한 CSS 설정이다. 그러나 이러한 설정없이 행 높이가 감소하지 않을 것입니다. 만 그 내용은 것.

끝에서 TR 요소가 제거됩니다.

전체 라인은 JQuery와없고 기본 자바 스크립트가 포함되어 있습니다.

희망이 도움이.

여기에 예제 코드는 다음과 같습니다

    <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>

11.나는 전체 TBODY을 밀어 싶어 나는 페이드 및 슬라이드 효과를 결합하여이 문제를 관리했습니다.

나는 전체 TBODY을 밀어 싶어 나는 페이드 및 슬라이드 효과를 결합하여이 문제를 관리했습니다.

나는 (2, 3 단계는 경우에 대체 당신이 아래로 슬라이드 할 또는 최대) 3 단계로 이런 짓을했습니다

slideUp의 예 :
```
tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
    tbody.slideUp(300)
});
```
12.내가 제공하는 모든 다른 솔루션에 문제가 있었지만 버터로 부드러운이 간단한 일을하고 끝났다.

내가 제공하는 모든 다른 솔루션에 문제가 있었지만 버터로 부드러운이 간단한 일을하고 끝났다.

다음처럼 HTML을 설정합니다 :
```
<tr id=row1 style='height:0px'><td>
  <div id=div1 style='display:none'>
    Hidden row content goes here
  </div>
</td></tr>
```
다음과 같이 당신의 자바 스크립트 설정 :
```
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";   
  } 
}
```
기본적으로, 사업부의 내부로 "보이지 않는"행 0 픽셀의 높이를 확인하십시오. 사업부 (안 행)에 애니메이션을 사용하고 1 x 1 픽셀로 행 높이를 설정합니다.

다시 행을 숨기려면 사업부에 반대 애니메이션을 사용하고 0 픽셀의 행 높이를 다시 설정합니다.
13.나는 비니가 쓰여 및 사용하고있는 플러그인을 좋아했다. 그러나 슬라이딩 행 내부 테이블의 경우 (TR / TD)에 중첩 된 테이블의 행은 항상 후에도 위로 미끄러 숨겨져 있습니다. 내가 플러그인에서 빠르고 간단한 해킹했다 그래서 중첩 테이블의 행을 숨길 수 없습니다. 그냥 다음 줄을 변경

나는 비니가 쓰여 및 사용하고있는 플러그인을 좋아했다. 그러나 슬라이딩 행 내부 테이블의 경우 (TR / TD)에 중첩 된 테이블의 행은 항상 후에도 위로 미끄러 숨겨져 있습니다. 내가 플러그인에서 빠르고 간단한 해킹했다 그래서 중첩 테이블의 행을 숨길 수 없습니다. 그냥 다음 줄을 변경
```
var $cells = $(this).find('td');
```
...에
```
var $cells = $(this).find('> td');
```
어떤되지 중첩 된 사람 만 즉시 TDS를 찾습니다. 이 플러그인을 사용하여 다른 사람을 도움 테이블을 중첩 된 바랍니다.

14.나는 # 비니의 게시물에 댓글을 추가 할하지만 담당자를 해달라고 그래서 대답을 게시해야 할 것이다 ...

나는 # 비니의 게시물에 댓글을 추가 할하지만 담당자를 해달라고 그래서 대답을 게시해야 할 것이다 ...

플러그인에 버그를 발견 - 당신은 그냥 다른 인수가 전달되지 않은 경우가 덮어 얻을 인수에 물체를 통과 할 때 쉽게 코드 아래에 인수가 처리되는 순서를 변경하여 해결.. 또한 닫은 후 행을 파괴하기위한 옵션을 추가했습니다 (I가 필요했다 전용으로!). $ ( '#이 ROW_ID') slideRow ( '위로', 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);

15.당신이 슬라이드에 필요하고 동시에 테이블 행을 퇴색 경우, 다음을 사용하십시오 :

당신이 슬라이드에 필요하고 동시에 테이블 행을 퇴색 경우, 다음을 사용하십시오 :

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');
        });
});
});

16.

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);
  }
});

17.당신이 행의 높이를 애니메이션을 시작 동시에 표시 없음으로 행의 TD 년대를 설정하면 내가 수행 할 수 있습니다

당신이 행의 높이를 애니메이션을 시작 동시에 표시 없음으로 행의 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;
    }
}

18.이 코드는 작동합니다!

이 코드는 작동합니다!

<!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>

19.http://jsfiddle.net/PvwfK/136/

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();
    }
});

});

20.비니가 제공하는 플러그인은 정말 가까이,하지만 난 발견하고 작은 문제 몇 가지를 해결했습니다.

비니가 제공하는 플러그인은 정말 가까이,하지만 난 발견하고 작은 문제 몇 가지를 해결했습니다.
21.빠른 / 쉬운 수정 :

빠른 / 쉬운 수정 :

사용 JQuery와 .toggle ()는 쇼 / 행 중 하나를 행하거나 앵커의 onclick을 숨 깁니다.

함수는 숨겨진하고자하는 행을 식별하기 위해 작성해야하지만, 전환 당신이 찾고있는 기능을 만듭니다.

from https://stackoverflow.com/questions/467336/how-to-use-slidedown-or-show-function-on-a-table-row by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 사업부에 매 3 명 div가 랩 (0)	2020.10.02
[JQUERY] 어떻게 주어진 앵커로 스크롤 HTML 페이지에? (0)	2020.10.02
[JQUERY] jQuery를 테이블 정렬 (0)	2020.10.01
[JQUERY] 자기 스트랩 = DISS? (0)	2020.10.01
[JQUERY] 요소가 존재 할 때까지 얼마나 기다려야합니까? (0)	2020.10.01

복붙노트

[JQUERY] 어떻게 사용 slideDown (또는 쇼) 테이블 행에 함수?

어떻게 사용 slideDown (또는 쇼) 테이블 행에 함수?

해결법

1.애니메이션이 테이블 행에서 지원되지 않습니다.

3.여기에 플러그 - 인의 나는이를 위해 쓴, 그것은 플레처의 구현에서 조금 걸리지 만 광산 (더 행을 삽입) 아래에만 행을 위하기 위해 사용하거나됩니다.

5.이 같은 행의 내용을 선택합니다 :

6.나는이 대답에 시간 뒤에 조금 해요,하지만 난 그것을 할 수있는 방법을 발견 :)

7.나는 숨겨진 행이있는 테이블을 필요로하는 슬라이드 및 행 클릭에보기 중.

8.중첩 테이블과 테이블 행을 가지고 :

9.나는 행의 TD 요소를 사용하여이 문제를 입수했습니다 :

10.나는 여기에 제공하고 몇 가지 문제에 직면 아이디어를 사용했다. 나는 그들 모두를 고정 내가 공유하고 싶은 부드러운 한 줄이있다.

11.나는 전체 TBODY을 밀어 싶어 나는 페이드 및 슬라이드 효과를 결합하여이 문제를 관리했습니다.

12.내가 제공하는 모든 다른 솔루션에 문제가 있었지만 버터로 부드러운이 간단한 일을하고 끝났다.

14.나는 # 비니의 게시물에 댓글을 추가 할하지만 담당자를 해달라고 그래서 대답을 게시해야 할 것이다 ...

15.당신이 슬라이드에 필요하고 동시에 테이블 행을 퇴색 경우, 다음을 사용하십시오 :

16.

17.당신이 행의 높이를 애니메이션을 시작 동시에 표시 없음으로 행의 TD 년대를 설정하면 내가 수행 할 수 있습니다

18.이 코드는 작동합니다!

19.http://jsfiddle.net/PvwfK/136/

20.비니가 제공하는 플러그인은 정말 가까이,하지만 난 발견하고 작은 문제 몇 가지를 해결했습니다.

21.빠른 / 쉬운 수정 :

'JQUERY' 카테고리의 다른 글

티스토리툴바