Jquery를 사용하여 테이블에 열을 숨기기

Question

이전에 필요로하는 다른 사람에게 사용하도록 제안되었던 예가 발견되었습니다. (Demo link to the suggested fix) col 태그를 사용하여 각 열을 숨길 수 있도록 프로세스를 단순화하려고했습니다. . 그러나 클래스를 col 태그에 추가하면 기능이 손상되고이를 수정하는 방법을 모르겠습니다.

내 데모 : 내가 제대로 이해하면 Here

Answer 1

는, 당신은 그냥

을 아래처럼 그 th 년대에

<tr> 
<th class="first_name">First Name</th> 
<th class="last_name">Last Name</th> 
<th class="email">Email</th> 
</tr> 

을 클래스를 추가하고 약간 아래처럼 스크립트를 수정해야

$("input:checkbox:not(:checked)").each(function() { 
    var column = $("." + $(this).attr("name")); 
    $(column).hide(); 
}); 

$("input:checkbox").click(function(){ 
    var column = $("." + $(this).attr("name")); 
    $(column).toggle(); 
}); 

DEMO :http://jsfiddle.net/8BahZ/400/

Answer 2

col 태그를 토글하는 것으로 보이고 열 자체는 토글하지 않는 것으로 보입니다.

Answer 3

나를 위해 Chrome에서 col 태그가 다른 태그 (thead, th)로 확장되므로 col을 선택해도 아무 것도 얻을 수 없습니다. 비록 당신이 그것들을 얻었을지라도, 당신은 단순히 칼럼 헤더를 토글하고 있습니다.

어쨌든 콘솔에서 말하는대로 구문 오류가 발생합니다. 문을 종료 할 때 표현식에 ;을 사용할 수 없습니다.

클리너 용액은 :nth-child : http://jsfiddle.net/8BahZ/402/을 사용할 수 있습니다.

var f = function() { 
    var index = $(":checkbox").index(this) + 1; 
    $("table > * > * > :nth-child(" + index + ")").toggle(this.checked); 
}; 

$(":checkbox").click(f).each(f); // bind handler and run it once