隐藏和/或显示表列

-1

我需要一个只能显示某些列的表格，具体取决于是否选中了一个复选框。如果选中，我想要显示所有列。如果没有选择，我需要它只显示“每周”类的列。 我想使用尽可能少的JavaScript（如果有），并且需要跨浏览器兼容。隐藏和/或显示表列

<table> 
    <tr class="weekly"> 
    <td></td> 
    </tr> 
    <tr class="overall"> 
    <td></td> 
    </tr> 
</table> 
<input type="checkbox" name="data" value="Show Overall Data" />

简而言之，我需要一个表格，根据复选框的状态来隐藏和显示某些列。

此外，我不擅长编码，所以我需要有人粘贴包括HTML标签在内的所有代码。

来源

2012-05-05 Shane Hicks

[这样的事情（http://stackoverflow.com/questions/2595835/how-to-hide-table-columns-in-jquery） – anu

那你试过吗？ –

@anu我看着它，它听起来像我在找什么，但我需要在HTML中的代码，所以我可以复制和粘贴它，我是JS的初学者。 –

的Javascript

function check() 
{ 

    if(document.getElementById("weekly").style.display == "none") 
    document.getElementById("weekly").style.display = "block"; 
    else 
    document.getElementById("weekly").style.display = "none"; 
    if(document.getElementById("overall").style.display == "block") 
    document.getElementById("overall").style.display = "none"; 
    else 
    document.getElementById("overall").style.display = "block"; 

}

和HTML

<table> 
    <tr class="weekly" id="weekly" style="display:none"> 
    <td>ABBB</td> 
    </tr> 
    <tr class="overall" id="overall" style="display:none"> 
    <td>BCC</td> 
    </tr> 
</table> 
<input type="checkbox" name="data" value="Show Overall Data" onclick="check()"/>

来源

2012-05-05 04:48:48 Jhilom

这隐藏了行，问题是如何隐藏列。 –

编辑：这里完整的html。使用jQuery

<html> 
<head> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script> 

$(document).ready(function(){ 


if ($("input:checkbox").is(":not(:checked)")){ 
    $('tr').hide(); 
    $('tr.weekly').show(); 
} 

}); 
</script> 
</head> 
<body> 
<input type="checkbox" name="data"/> 

<table> 
    <tr class="weekly"> 
    <td>WEEEKLY</td> 
    </tr> 
    <tr class="overall"> 
    <td>OVERLLL</td> 
    </tr> 
</table> 

</body> 
</html>

来源

2012-05-05 04:32:10 sha256

嘿，伙计问题是隐藏列，你已经给出解决方案来隐藏行。关于问题完全错误的答案。 – Murtaza

你能为我写这个HTML表单吗？我不擅长JavaScript。 –

@Murtaza，他说专栏，没错，但是如果你看到他的代码，任何人都会明白他想隐藏那一行中的所有列。你为什么不明白？ – sha256

使用jQuery

$(document).ready(function() { 
    $('.overall').hide(); 
}); 

$("#data").is(':checked') 
    ? $(".overall").show() 
    : $(".overall").hide();

变化NAME = “数据” 为ID = “数据”

来源

2012-05-05 04:32:42 user1376261

建立在以前的计算器答案指向的示例@anu上，这里是jsbin中的一个实例。

http://jsbin.com/ehodul/4/edit#javascript,html,live

下面是（最）的代码，但同样，我会鼓励你与jsbin的例子进行修补。

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="jquery.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
    table { padding: 0; border-collapse: collapse; } 
    table th { background-color: #eee; } 
    table td, th { border: 1px solid #d7d7d7; padding: 7px; } 
</style> 
</head> 
<body> 


<select id="myOptions"> 
    <option value="1">hide col 1</option> 
    <option value="2">hide col 2</option> 
    <option value="3">hide col 3</option> 
    <option value="4">hide col 4</option> 
</select> 

    <p>&nbsp;</p> 

<table id="myTable" cellspacing="0" cellpadding="0"> 
    <thead> 
    <tr> 
     <th>col 1</th> 
     <th>col 2</th> 
     <th>col 3</th> 
     <th>col 4</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1abcdefg</td> 
     <td>2abcdefg</td> 
     <td>3abcdefg</td> 
     <td>4abcdefg</td> 
    </tr> 
    <tr> 
     <td>1abcdefg</td> 
     <td>2abcdefg</td> 
     <td>3abcdefg</td> 
     <td>4abcdefg</td> 
    </tr> 
    <tr> 
     <td>1abcdefg</td> 
     <td>2abcdefg</td> 
     <td>3abcdefg</td> 
     <td>4abcdefg</td> 
    </tr> 
    <tr> 
     <td>1abcdefg</td> 
     <td>2abcdefg</td> 
     <td>3abcdefg</td> 
     <td>4abcdefg</td> 
    </tr> 
    </tbody> 
    </table> 

    <script type="text/javascript"> 
function hideColumn(columnIndex) { 
    $('#myTable thead th, #mytable tbody td').show(); 
    $('#mytable thead th:nth-child('+(columnIndex)+'), #mytable tbody td:nth-child('+(columnIndex)+')').hide(); 

} 

    $("#myOptions").change(function() { 
     selectedVal = $(this).val(); 
     console.log(selectedVal); 
     hideColumn(selectedVal); 
    }); 

    </script> 
</body> 
</html>

来源

2012-05-05 04:57:41 mg1075

隐藏和/或显示表列

回答

相关问题