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

私はこれを試しました..いくつかの指示が必要です..ありがとう

4

1 に答える 1

0

間違いが多かったので、正しいバージョンの HTML を入れました。また、ID を割り当てました<th id="Dev">Development</th>。

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

他の列で機能させるには、すべての に ID を割り当ててください<th>。

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

于 2013-09-17T08:57:49.053 に答える