使用 jQuery 隐藏取消隐藏列

hide unhide column using jquery

本文关键字：隐藏 取消 使用 jQuery      更新时间：2023-09-26
Some checkboxes in jsp:: 
<input type="checkbox" checked="checked" id="DevId" name="Dev1">Dev
<input type="checkbox" checked="checked" id="CitId" name="Cit1">CIT
<input type="checkbox" checked="checked" id="SitId" name="Sit1">SIT
<inputtype="checkbox" checked="checked" id="NftId" name="Nft1">NFT
<input type="checkbox" checked="checked" id="UatId" name="Uat1">UAT
<input type="checkbox" checked="checked" id="PrePodId" name="PreProd1">Pre-Prod
<input type="checkbox" checked="checked" id="ProdId" name="Prod1">Prod
here is a table
<table id="dataTable" border="1">
<tr>
<th>Serial No.</th>
<th">Message Flow Name</th>
<th>Description</th>
<th>PropertyKey</th>
<th>Development</th>
<th>CIT Value</th>
<th>SIT Value</th>
<th>NFT</th>
<th>UAT</th>
<th>Pre Prod</th>
<th>Prod</th>
</tr>
and some rows
<td><input type="text" name="seriql no.">
<td><input type="text" name="flow name">
<td><input type="text" name="description">
<td><input type="text" name="propertykey">
<td><input type="text" name="Dev">
<td><input type="text" name="Cit">
<td><input type="text" name="SIT">
<td><input type="text" name="NFT">
<td><input type="text" name="UAT">
<td><input type="text" name="Pre-Prod">
<td><input type="text" name="Prod">
</table>

问题：：当我点击复选框时说.."DevId"我希望隐藏"开发"列。当我再次勾选该复选框时，它应该是可见的。可能在jquery中。 请帮忙...提前致谢

<script>
$(document).on('change', 'table thead input', function() {
    var checked = $(this).is(":checked");
    var index = $(this).parent().index();
    $('table tbody tr').each(function() {
        if (checked) {
            $(this).find("td").eq(index).show();
        } else {
            $(this).find("td").eq(index).hide();
        }
    });
});
</script>

我试过这个..需要一些指导..谢谢

我输入了正确版本的 HTML，因为有很多错误，我也为<th id="Dev">Development</th>分配了一个 ID：

<input type="checkbox" id="DevId" name="Dev1"/>Dev
<input type="checkbox" id="CitId" name="Cit1"/>CIT
<input type="checkbox" id="SitId" name="Sit1"/>SIT
<input type="checkbox" id="NftId" name="Nft1"/>NFT
<input type="checkbox" id="UatId" name="Uat1"/>UAT
<input type="checkbox" id="PrePodId" name="PreProd1"/>Pre-Prod
<input type="checkbox" id="ProdId" name="Prod1"/>Prod
<table id="dataTable" border="1">
<tr>
<th>Serial No.</th>
<th>Message Flow Name</th>
<th>Description</th>
<th>PropertyKey</th>
<th id="Dev">Development</th>
<th>CIT Value</th>
<th>SIT Value</th>
<th>NFT</th>
<th>UAT</th>
<th>Pre Prod</th>
<th>Prod</th>
</tr>
<tr>
<td><input type="text" name="seriql no."/></td>
<td><input type="text" name="flow name"/></td>
<td><input type="text" name="description"/></td>
<td><input type="text" name="propertykey"/></td>
<td><input type="text" name="Dev"/></td>
<td><input type="text" name="Cit"/></td>
<td><input type="text" name="SIT"/></td>
<td><input type="text" name="NFT"/></td>
<td><input type="text" name="UAT"/></td>
<td><input type="text" name="Pre-Prod"/></td>
<td><input type="text" name="Prod"/></td>
</tr>
</table>

JavaScript很简单：

$(function(){
    $("input[type='checkbox']").on("change", function(){
       var id = $(this).attr("id");
        var is_checked = $(this).is(":checked");
        id = id.substring(0, id.length-2);
        //document.write(id);
        alert(is_checked);
        if(is_checked) {
           $("input[name='"+id+"']").parent().hide();
            $("#"+ id).hide();
        } else {
            $("input[name='"+id+"']").parent().show();
            $("#" + id).show();
        }
    });
});

为了适用于其他列，请为每个<th>分配一个 ID。

示例：http://jsfiddle.net/CxskE/1/

相关文章：