2010-07-21 4 views
4

를 사용하여 테이블의 TD 우리는 어떻게 사람이 모든 행에서 첫 번째 열 즉 td_1을 한 후 어떤 것 숨기려면 열 숨기기/JQuery와

<table> 
    <tr> 
    < td id="td_1" >name</ td > 
    < td id="td_2" >title</ td > 
    < td id="td_3" >desc</ td > 
    </ tr > 
    <tr> 
    < td id="td_1" >Dave</ td > 
    < td id="td_2" >WEB DEV</ td > 
    < td id="td_3" >Blah Blah</ td > 
    </tr> 
    <tr> 
    < td id="td_1" >Nick</td> 
    < td id="td_2" >SEO</td> 
    < td id="td_3" >Blah Blah and blah</td> 
    </tr> 
</table> 

그래서 가정 JQuery와

을 사용하여 테이블의 열을 숨길 수 있습니다 코드가 될까요?

미리 감사드립니다 데이브

+0

http://api.jquery.com/nth-child-selector/ ... 심지어 아이디 장식성 ... $ ('그럴 TD 필요하지 않습니다 : n 번째의 아이를 (N) ') 여기서 n은 열 x 호입니다. – pxl

+0

또한 문제 해결에 도움을 주시면 답변을 수락하십시오. – Marko

답변

16
$(document).ready(function() { 
    $("#td_1").hide(); 
} 

는 그러나 이상적으로, 당신은 ID 대신 클래스를 사용하고 싶습니다.

그래서

<table> 
    <tr> 
    <td class="td_1">name</td> 
    <td class="td_2">title</td> 
    <td class="td_3">desc</td> 
    </tr> 
    <tr> 
    <td class="td_1">Dave</td> 
    <td class="td_2">WEB DEV</td> 
    <td class="td_3">Blah Blah</td> 
    </tr> 
    <tr> 
    <td class="td_1">Nick</td> 
    <td class="td_2">SEO</td> 
    <td class="td_3">Blah Blah and blah</td> 
    </tr> 
</table> 

그리고 당신은 유사한 코드를 사용합니다 : (.) ​​

$(document).ready(function() { 
    $(".td_1").hide() 
} 

따라서 변경 유일한 것은이 점에 해시 (#)입니다. 해시는 ID를위한 것이고 점은 클래스를위한 것입니다.

또 다른 방법은 nthChild 선택기를 사용하는 것입니다.

$(document).ready(function() { 
    $('tr td:nth-child(1)').hide(); 
} 

여기서 1은 숨길 열 번호입니다.

HTH

+0

gr8 아이디어를 주셔서 감사합니다. 나는 그것을 다른 곳에서 사용할 것입니다. 그러나 나는 그 칼럼들이 역동적이고, 그들의 id가 증가한다고 언급하는 것을 잊었다. 그래서 어떻게 동적으로 CSS를 적용 할 수 있습니까? . 감사합니다. – dave

+3

jquery는 CSS 선택기를 크게 지원합니다. 열을 선택하기 위해 $ ('tr td : nth-child (1)'과 같은 선택기를 쓸 수 있습니다 ... http://api.jquery.com/nth-child-selector/ – pxl

+0

당신이 나를 때려 :) +1 – Marko