Question

在线浏览Javascript show / hide的教程后，我只能找到默认可见所有列的示例。我正在寻找一种方法来默认隐藏一些列（并允许它们通过复选框切换）并默认显示一些列（并允许通过复选框切换它们）。

这可能吗？

作为参考，我的表结构如下：

<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;
}

<强> Pure JS fiddle example

请考虑使用javascript库JQuery来处理这些微不足道的事情。您的代码可以简单如下：

的 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(); }); });

<强> jQuery Fiddle example

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（ '类'）。的document.getElementById（ 'ID'）classList.remove（ '类'）;

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脚本代码。

请找到工作example

Answer 5

要隐藏的列最初应具有属性style =“display：none”

Javascript默认隐藏列

5 个答案: