jQueryを使用しないで表の列を表示/非表示を切り替える

Question

複数列のHTML表があります。ここでは、特定の列（4番目の列）の可視性を切り替えることができます。次のように私は正常に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(); 
    }); 
}); 

しかし、私は純粋なJavaScriptでこれを実装したいと思います。私はすべてのtdとthの要素に属性を追加することができないので、私はこれまで使ってきたソリューションがgetElementsByClassNameとclassList.toggle()の場合にはうまくいきません（私の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」をカラム番号に置き換えてください。

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を使用：

Answer 2

は場合、それはVivek's solution aboveを実装し、元のテキストのスワップを追加するために、他の誰を助け、私の代わりに<a>の<input> + <label>を使用

#checkbox { 
    display: none; 
} 

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

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

多くの方法でその猫を肌にさらすことができますが、それは私にとって最も単純なようです。本当にありがとう！