JavaScriptでテーブルの列を動的に非表示/表示

Question

私はボタンを押したときに、テーブルにある非表示の列を表示する必要があります。しかし、私の問題は、私は1つの行だけを表示することです。

function call() 
{ 
    document.getElementById('kit_head').style.display = 'block'; 
    document.getElementById('line').style.display = 'block'; 
} 

が、私はそれが私のデータベースは内部の持っているすべての行を表示するために何をすることがあります。

<a href="#" class="btn-xl btn-default" id="btn_callkit" onclick="call();return false;" style="width: 150px;color: white;">KIT</a> 
<table id="example0" class="table table-striped"> 

     <br/> 
      <thead> 
       <tr> 
        <th id="kit_head" style="display:none;">KIT</th> 
        <th>Material</th> 
        <th>Info</th> 
       </tr> 
      </thead> 

    <?php 
         $rol = mysql_query("SELECT * from pg WHERE pg.dataset = 2 "); 
          if (mysql_num_rows($rol) != 0) { 
           while($item = mysql_fetch_array($rol)) { 


            $id = $item['id']; 
            $info = $item['info']; 
            $code = $item['lote_code']; 
        ?> 

      <tr id="infodata_<?=$id;?>"> 


        <td id="line" style="display:none;"> 

         <div class="checkbox checkbox-circle" style="text-align:center;margin-top:40px;"> 
          <input id="check_<?=$id;?>" type="checkbox"> 
          <label for="check_<?=$id;?>"> 

          </label> 
         </div> 

        </td> 

        <td><?php echo $info;?></td> 

        <td><?php echo $code;?></td> 


       </tr> 
     <? }} ?> 
     </tbody> 
     </table> 

私のJavascriptがこのコードを持っていますか？

Answer 1

セルのIDはlineです。

getElementById - 名前が意味するように - 単一の要素を返しますが、これはIDが1回のみ使用されるためです。だからあなたのコード：

document.getElementById('line').style.display = 'block';

は、最初にマッチした要素を取得し、定義されたスタイル属性を設定しています。

代わりに、classを使用する必要があります。これは、共通のルールを共有する多くの関連要素または要素を指定することを目的としています。

次に、一致するすべての要素を取得し、それらの要素をループして、目的のスタイル属性を設定できます。

DOM APIは、クラス名で要素を取得するための多くのメソッドを公開しています。サポートするブラウザのバージョンのリストを参照して、利用可能なものから適切な手法を選択する必要があります。

編集：追記として 、KennyDopeは、ベストプラクティスはスタイルを操作するためのクラスを切り替えることが一般的であると言うで正しいです。インラインスタイルよりもクラスの追跡と変更がずっと簡単です。

Answer 2

ベストプラクティスは、インラインスタイルの代わりにクラスを切り替えることです。

あなたのコードは、このようなものになります。

<table class="table table-striped"> 
    <tr> 
     <td class="toggle">Toggle field</td> 
     <td class="toggle">Toggle field</td> 
     <td>Other field</td> 
    </tr> 
</table> 

<button id="btn_callkit">toggle</button> 

<script> 
    function toggle (t) { 
     var listTd = document.getElementsByClassName("toggle"); 
     var i; 

     for (i = 0; i < listTd.length; i++) {   
      listTd[i].classList.toggle('hidden'); 
     }   
    } 

    document.getElementById('btn_callkit').addEventListener('click', toggle); 
</script> 

Answer 3

idプロパティは、ページ上で一意でなければなりません。

逆に、classプロパティは、名前が示すように、オブジェクトのクラスであり、複数のオブジェクトが同じクラスを共有することができます。

列を表示/非表示にする場合は、各行の特定の<td>を同じクラスにアサインしてから、getElementByClassNameを使用してJavascriptで操作する必要があります。

NBのgetElementByClassNameは、オブジェクトの配列を返します。配列を移動してそれぞれの表示スタイルを変更する必要があります。