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

您要隐藏的列最初应具有属性 style="display:none"

Answer 2

在你的 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";
    }
}

然后在组合框 onChange() 事件中，您应该调用 togleTable 函数，将要显示/隐藏的行号作为 id 传递

我认为这是一个很好的起点。 玩得开心

更新

如果你想为你的行设置多个类，别忘了你也可以使用这个： document.getElementById('id').classList.add('class'); document.getElementById('id').classList.remove('class');

Answer 3

这里是切换功能（使用 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 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

纯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