javascript - Javascriptデフォルトで列を非表示

Question

Javascriptの表示/非表示に関するチュートリアルをオンラインで閲覧した後、すべての列がデフォルトで表示されている例しか見つかりませんでした。いくつかの列をデフォルトで非表示にし（そしてチェックボックスを介してそれらをオンに切り替えることができるようにし）、いくつかの列をデフォルトで表示する（そしてチェックボックスを介してそれらをオフに切り替えることができるようにする）方法を探しています。

これは可能ですか？

参考までに、私のテーブル構造は次のとおりです。

<table>
  <thead>
<tr>
  <th>Name</th>
  <th>Job</th>
</tr>
  </thead>
  <tbody>
    <tr>
      <td>Mike</td>
      <td>Dancer</td>
    </tr>
  </tbody>
</table>

Answer 1

純粋なJavaScript：

HTML

<input type="checkbox" onclick="showhide(1, this)" checked="checked" /> Name<br />
<input type="checkbox" onclick="showhide(3, this)" checked="checked" /> Job<br />

JS

function showhide(column, elem){
    if (elem.checked)
        dp = "table-cell";
    else
        dp = "none";
    tds = document.getElementsByTagName('tr');
    for (i=0; i<tds.length; i++)
        tds[i].childNodes[column].style.display = dp;
}

純粋なJSフィドルの例

このような些細なことのために、 JQueryとしてjavascriptライブラリを使用することを検討してください。コードは次のように単純にすることができます。

HTML

<input type="checkbox" data-col="1" checked="checked" /> Name<br />
<input type="checkbox" data-col="2" checked="checked" /> Job<br />

jQuery JS：

$(function(){
    $(':checkbox').on('change', function(){
        $('th, td', 'tr').filter(':nth-child(' + $(this).data('col') + ')').toggle();
    });
});

jQueryFiddleの例

Answer 2

これがトグル関数です（jQueryを使用）：

function toggleColumns(column, state) {
    var cells = $("table").find("th, td").filter(":nth-child(" + column + ")");

    if (state)
        cells.hide();
    else
        cells.show();
}

その列をデフォルトで非表示にする必要がある場合は、onLoad中にこの関数を呼び出すことができます。例 http://jsfiddle.net/nynEd/

Answer 3

あなたのCSSには次のようなものが必要です

.hidden{
    display:none;
}
.shown{
    display:block;
}

次に、HTMLに次のようなものが含まれている必要があります

<table>
  <thead>
     <tr>
        <th id="th1" class="shown">Name</th>
        <th id="th2" class="shown">Job</th>
     </tr>
  </thead>
  <tbody>
    <tr>
      <td id="td1" class="shown">Mike</td>
      <td id="td2" class="shown">Dancer</td>
    </tr>
  </tbody>
</table>

次に、列の可視性を変更するtogleメソッドを実装する必要があります

//id should be passhed as 1, 2, 3 so on...
function togleTable(id){
    if(document.getElementById("th"+id).className == "shown"){
        document.getElementById("th"+id).className = "hidden";
    }
    if(document.getElementById("td"+id).className == "shown"){
        document.getElementById("td"+id).className = "hidden";
    }
    if(document.getElementById("th"+id).className == "hidden"){
        document.getElementById("th"+id).className = "shown";
    }
    if(document.getElementById("td"+id).className == "hidden"){
        document.getElementById("td"+id).className = "shown";
    }
}

次に、compobox onChange（）イベントで、togleTable関数を呼び出して、表示/非表示にする行の番号をidとして渡す必要があります。

これは私が思うに始めるのに良い場所です。楽しむ

更新しました

行に複数のクラスが必要な場合は、次のように使用することもできます。document.getElementById（'id'）。classList.add（'class'）; document.getElementById（'id'）。classList.remove（'class'）;

Answer 4

これには多くの方法があります。私のオプションは、次のような基本的なjquery関数を使用することです。

<input type="checkbox" id="opt1" checked/>col 1
<input type="checkbox" id="opt2"/>col 2

<table border="1" cellpadding="5">
  <thead>
<tr>
  <th>Name</th>
  <th>Job</th>
  <th id="col1">col 1</th>
  <th id="col2">col 2</th>
</tr>
  </thead>
  <tbody>
    <tr>
      <td>Mike</td>
      <td>Dancer</td>
      <td class="data1">data 1</td>
      <td class="data2">data 2</td>
    </tr>
  </tbody>
</table>​

これはあなたのHTMLコードです。

$(document).ready(function() {
    if($("#opt1").is(":checked")){
         $("#col1").show();
        $(".data1").show();   
    }else{
         $("#col1").hide();
        $(".data1").hide();
    }
    if($("#opt2").is(":checked")){
         $("#col2").show();
        $(".data2").show();   
    }else{
         $("#col2").hide();
        $(".data2").hide();
    }

    $("#opt1").live('click', function() {
        if($("#opt1").is(":checked")){
         $("#col1").show();
        $(".data1").show();   
    }else{
         $("#col1").hide();
        $(".data1").hide();
    }
    });

    $("#opt2").live('click', function() {
       if($("#opt2").is(":checked")){
         $("#col2").show();
        $(".data2").show();   
    }else{
         $("#col2").hide();
        $(".data2").hide();
    }
    });
});​

これはjava-scriptコードです。

実例を見つけてください

Answer 5

非表示にする列には、最初は属性style = "display：none"が必要です。