JQuery를 사용하여 다음 표의 행을 찾습니다.


15

JQuery를 사용하면 클릭 한 셀에있는 이미지 src (예 : class = "expand")를 변경할 표 셀 (아래의 "class ="expand " plus.gif이고, minus.gif와 번갈아 가며) 해당 행의 클래스가 "숨김"인지 여부에 따라 행 바로 아래의 행을 숨기거나 표시하십시오. (클래스에 "숨김"이 있으면 표시하고 숨김 클래스가없는 경우 숨기기). 마크 업에서 클래스와 클래스를 변경하면 유연해진다.

감사

표 행

<tr> 
<td class="expand"><img src="plus.gif"/></td> 
<td>Data1</td><td>Data2</td><td>Data3</td> 
</tr> 
<tr class="show hide"> 
<td> </td> 
<td>Data4</td><td>Data5</td><td>Data6</td> 
</tr> 
18

당신은 쇼를 필요로하고 태그를 숨기지 않습니다

$(document).ready(function(){ 
    $('.expand').click(function() { 
     if($(this).hasClass('hidden')) 
      $('img', this).attr("src", "plus.jpg"); 
     else 
      $('img', this).attr("src", "minus.jpg"); 

     $(this).toggleClass('hidden'); 
     $(this).parent().next().toggle(); 
    }); 
}); 

편집 : 좋아, 나는 이미지를 변경하는 코드를 추가했습니다. 그것은 그걸하는 한 가지 방법 일뿐입니다. 다음 행이 숨겨져 있으며 행이 표시 될 때이를 제거 할 때 클래스로 expand 속성에 태그를 추가했습니다.

  0

jQuery를 좋아하니? '$ (this) .find ('img') 대신에 좀 더 간결한'$ ('img', this)'를 사용할 수 있습니다. '$'함수는 두 번째 매개 변수를 받아들입니다. 그것이 사용될 때 jQuery는'this'의 컨텍스트에서 선택 자만 찾습니다. 23 sep. 082008-09-23 20:30:33

  0

고마워, 나는 그 변화를 만들었다. 23 sep. 082008-09-23 20:37:07

  0

나에게 거꾸로 조금 느껴진다. 다른 모든 것은 왼쪽에서 오른쪽으로 읽는 반면, 그 구문을 사용하면 오른쪽에서 왼쪽으로 읽어야합니다. 둘 다 똑같은 효과가 있기 때문에 일반적으로 $ (this) .find (...) 스타일을 고수하려고합니다. 20 oct. 082008-10-20 01:42:46

+2

성능 차이가 있는지 궁금합니다. 예 : 하나 또는 다른 하나를 사용하면 jQuery의 내장을 실행하는 데 다른 코드가 사용됩니까? 06 mar. 092009-03-06 19:06:15


-2

이는 이미지가

<tr> 

<td colspan="2" align="center" 
<input type="image" src="save.gif" id="saveButton" name="saveButton" 
    style="visibility: collapse; display: none" 
    onclick="ToggleFunction(false)"/> 

<input type="image" src="saveDisabled.jpg" id="saveButtonDisabled" 
     name="saveButton" style="visibility: collapse; display: inline" 
     onclick="ToggleFunction(true)"/> 
</td> 
</tr> 

변경 JS에서의 자신의 기능에 onClick 이벤트가 그들 사이를 전환 할 수있는 HTML로 설정하는 방법입니다. 이을 시도해보십시오

ToggleFunction(seeSaveButton){  
    if(seeSaveButton){ 
     $("#saveButton").attr("disabled", true) 
         .attr("style", "visibility: collapse; display: none;"); 
     $("#saveButtonDisabled").attr("disabled", true) 
           .attr("style", "display: inline;"); 
    }  
    else {  
     $("#saveButton").attr("disabled", false) 
         .attr("style", "display: inline;"); 
     $("#saveButtonDisabled") 
         .attr("disabled", true) 
         .attr("style", "visibility: collapse; display: none;"); 
    } 
} 
  0

각 코드 행을 4 칸 들여 쓰기하면 여는 태그 등을 나타내는 "코드"블록으로 나타납니다. 23 sep. 082008-09-23 20:28:27


1

에서

...이 도움이

//this will bind the click event 
//put this in a $(document).ready or something 
$(".expand").click(expand_ClickEvent); 

//this is your event handler 
function expand_ClickEvent(){ 
    //get the TR that you want to show/hide 
    var TR = $('.expand').parent().next(); 

    //check its class 
    if (TR.hasClass('hide')){ 
     TR.removeClass('hide'); //remove the hide class 
     TR.addClass('show'); //change it to the show class 
     TR.show();    //show the TR (you can use any jquery animation) 

     //change the image URL 
     //select the expand class and the img in it, then change its src attribute 
     $('.expand img').attr('src', 'minus.gif'); 
    } else { 
     TR.removeClass('show'); //remove the show class 
     TR.addClass('hide'); //change it to the hide class 
     TR.hide();    //hide the TR (you can use any jquery animation) 

     //change the image URL 
    //select the expand class and the img in it, then change its src attribute 
     $('.expand img').attr('src', 'plus.gif'); 
    } 
} 

희망.

  0

감사합니다. 도움이되는 코드입니다 ....하지만 $ ('. expand img')는 확장 클래스의 이미지 ... 난 그냥 테이블 셀에 하나의 이미지 효과 싶어요 (<td>) 23 sep. 082008-09-23 20:36:57


9

아무도 삼항 연산자에 대한 사랑이 있습니까? :) 나는 가독성 고려 사항을 이해하지만 어떤 이유로 그것은 나를로 작성하는 클릭 수 :

$(document).ready(function() { 
    $(".expand").click(function() { 
      $("img",this).attr("src", 
       $("img",this) 
        .attr("src")=="minus.gif" ? "plus.gif" : "minus.gif" 
      ); 
      $(this).parent().next().toggle(); 
    }); 
}); 

... 그리고 아무 관계없는 클래스의 이점이있다.


3

최근에이 문제를 해결해야했지만 내 중첩 된 테이블이 관련되어 있으므로 좀 더 안전하고 안전한 버전의 자바 스크립트가 필요했습니다. 내 내용은 td의 내용이 있었고 다음 TR을 토글하려고했기 때문에 약간 상황이 달랐지 만 개념은 동일하게 유지됩니다.

$(document).ready(function() { 
    $('.expandButton').click(function() { 
     $(this).closest('tr').next('tr.expandable').fadeToggle(); 
    }); 
}); 

가장 가까운 TR,이 경우에는 첫 번째 부모를 가장 가까이에 표시합니다. 매우 구체적인 것을 원한다면 CSS 클래스를 추가 할 수 있습니다. 그런 다음이 버튼의 대상인 확장 가능한 클래스로 다음 TR을 가져 오도록 지정합니다. 그럼 그냥 fadeToggle() 표시 여부를 토글합니다. 선택기를 지정하면 실제로 처리 할 수있는 항목을 좁히는 데 도움이됩니다.