纯粹的射手:

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

http://jsfiddle.net/NPHDE/3/" rel = “ no follow” >Pure JS小提琴例子

请考虑使用 javascription 库“ a href=”“http://jquery.com/” rel=“nofollow”>JQuery

​ < 强 > HTML

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

联合来文:

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

http://jsfidd.net/FNFfpA/9/" rel = “ no follow” >jQuery Fiddle example

s 在这里切换函数( 使用 jQuery) :

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

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

If you need that column hidden by default, you can call this function during onLoad. Example http://jsfiddle.net/nynEd/

有很多办法可以解决这个问题 我的选择是使用基本的拼接函数 比如

<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的密码。

请找到工作 < a href=>" "http://jsfiddle.net/xQnaf/" rel=" nofollow" >example

在你的CS,你应该有一样的东西

.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>

然后,您必须执行一个切换方法,以改变列的可见度

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

然后,在 Change () 事件的compabox 中,您应该调用以 id 表示/ 隐藏行数的切换表函数

this is a good place to start i think. Have fun

< 强度 > Uped

if you want to have more than one class for your rows dont forget you can also use this: document.getElementById( id ).classList.add( class ); document.getElementById( id ).classList.remove( class );

您想要隐藏的列应该先有属性样式=“ display: noone” 的属性样式