jQuery를 사용하지 않고 테이블 열을 표시하거나 숨 깁니다.

Question

주어진 열 (아래, 4 번째)의 가시성을 토글하고자하는 다중 열 HTML 테이블이 있습니다. 다음과 같이 나는 성공적으로 jQuery를이 구현했습니다이 jQuery를 사용하여 내 사이트의 유일한 기능은 그대로

document.write('<a class="toggle" href="#!" data-alt="Hide">Show</a>.'); 
$(document).ready(function() { 
    $('.toggle').click(function() { 
     var el = $(this); 
     var curr = el.text(); 
     el.text(el.attr("data-alt")); 
     el.attr("data-alt", curr); 
     $('td:nth-child(4),th:nth-child(4)').toggle(); 
    }); 
}); 

그러나, 나는 순수 자바 스크립트에서이를 구현하고 싶습니다. 나는이 모든 것을 보았는데, 나는 과 classList.toggle()을 사용하는데, 나는 td과 th 요소에 속성을 추가 할 수 없다. (내 HTML은 Markdown 구현으로 생성되지 않는다. 그렇게).

어쩌면 거기에 document.querySelectorAll('td:nth-child(x)')을 사용하는 해결책이있을 것이라고 생각하지만 해결하지 못했습니다. 이견있는 사람?

Answer 1

예, JavaScript에서 document.querySelectorAll('td:nth-child(x)') 문을 사용하여 문제에 대한 해결책을 구현할 수 있습니다.

요소의 가시성을 토글하려면 추가 기능을 구현해야합니다. 아래 코드를 참조하십시오.

var toggleDisplay = function (element) { 
    element.style.display = (element.style.display === 'none')?'block':'none'; 
}; 

이제 아래 문을 호출하여 열의 표시 여부를 전환 할 수 있습니다.

document.querySelectorAll('td:nth-child(x),th:nth-child(x)').forEach(toggleDisplay); 

'x'를 열 번호로 바꾸십시오.

Answer 2

이 Vivek's solution above를 구현하고 원래의 텍스트 스와핑을 추가, 다른 사람을 도움이 경우

, 내가 사용 <input> + <label> 대신 <a> :

var message = '<input id="checkbox" type="checkbox">\ 
    <label for="checkbox" id="clickme" onclick="toggle()"></label>.'; 

document.write(message); 

var toggleDisplay = function (element) { 
    element.style.display = (element.style.display === 'none')?'block':'none'; 
}; 

function toggle() { 
    document.querySelectorAll('td:nth-child(4),th:nth-child(4)').forEach(toggleDisplay); 
}; 

다음 텍스트를 추가하는 CSS를 사용 :

#checkbox { 
    display: none; 
} 

#checkbox:not(:checked) + #clickme:after { 
    content: "Show"; 
} 

#checkbox:checked + #clickme:after { 
    content: "Hide"; 
} 

을

그 고양이를 껍질을 벗기는 방법은 많이 있지만 그게 나에게 가장 직관적 인 것처럼 보입니다. 정말 고마워!