5

5列のテーブルがあります

column1 column2 column3 column4 column5
------- ------- ------- ------- -------

最初のチェックボックスがチェックされている場合、1列ごとにいくつかのチェックボックスがあり、最初の列を表示する必要があります。チェックされていない場合は、最初の列を非表示にする必要があります。そのように、すべての列に対して行う必要があります。

いくつかの答えが見つかりましたが、解決策が見つかりませんでした。最初は隠れていて、他の操作はそれに取り組んでいません。

 $('#tableId td:nth-child(column number)').hide();

助けてください。よろしくお願いします....

4

7 に答える 7

10

さあ、完全な解決策：

http://jsfiddle.net/vXBtP/

ここで更新: http://jsfiddle.net/vXBtP/5/

<table>
   <thead>
       <td><input type="checkbox" checked="checked" /></td>
       <td><input type="checkbox" checked="checked" /></td>
       <td><input type="checkbox" checked="checked" /></td>
       <td><input type="checkbox" checked="checked" /></td>
       <td><input type="checkbox" checked="checked" /></td>
    </thead>
    <tbody>
    <tr>
       <td>column 1</td>
        <td>column 2</td>
        <td>column 3</td>
        <td>column 4</td>
        <td>column 5</td>
    </tr>
    </tbody>
</table>

$(document).on('change', 'table thead input', function() {
    var checked = $(this).is(":checked");

    var index = $(this).parent().index();
    if(checked) {
        $('table tbody tr td').eq(index).show();
    } else {
        $('table tbody tr td').eq(index).hide();
    }
});
于 2013-04-12T11:49:00.797 に答える
4

非表示にする列に応じて、次の盗まれたライナーを使用します。

$('td:nth-child(2)').hide();

を使用する場合

$('td:nth-child(2),th:nth-child(2)').hide();
于 2013-04-12T11:41:32.950 に答える
3

私があなたの言いたいことを理解したら、セレクターを使用して本当に簡単にすることができtr th, tr tdますnth-child。インデックスに基づいて移動できますがnth-child、jQuery の要素のようにインデックスが 0 ではないため、1 を追加する必要があります。また、JS を引き出す必要はありません。「n番目のtdのみ」を望まないという点で、tr前に配置することは非常に重要です。td:nthその場合、すべての行のすべての列を非表示にすることはありません。

YOUR ExampleのWORKING jsFIDDLEを参照してください

参考までに: 「よりクリーンな」外観が必要な場合 (turbotax サイトのように) 、 td自体を非表示にしないでください。代わりに、最大のテキスト部分よりも少し幅を広げ、各テキスト部分を各セル内に配置するpか、divタグを各セル内に配置します。次に、columnセレクターを変更して、各セルの内部要素を取得し、代わりに非表示にします。

この代替方法の例をここで参照してください!

HTML

<table>
    <thead>
        <tr>
            <th>
                <input id="chk1" type="checkbox" />
            </th>
            <th>
                <input id="chk1" type="checkbox" />
            </th>
            <th>
                <input id="chk1" type="checkbox" />
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
    </tbody>
</table>
<button>Reset</button>

JavaScript

$(function() {
    //  Selects your table by id, then the input checkboxes inside the table, you can 
    //  alternate this call with classnames on your inputs if you're going to have 
    //  more inputs than what's desired in call here.
        //  also note i'm using the "change" function and not "click", this simply 
        //  provides easier control of what's going on with your inputs and makes 
        //  later calls (like reset) a much easier call. Less thinking required
    $("#tableId input[type=checkbox]").on("change", function(e) {
        //  First variable grabs the inputs PARENT index, this is the TH containing 
        //  the input, thus the column you want hidden.
        //  The second is calling ALL TH's && TD's having that same index number
        var id = $(this).parent().index()+1,
            col = $("table tr th:nth-child("+id+"), table tr td:nth-child("+id+")");
        //  This simple inline "if" statement checks if the input is checked or now
        //  and shows the columns based on if it IS checked
        $(this).is(":checked") ? col.show() : col.hide();
    }).prop("checked", true).change(); // here i set all inputs to checked without having to write it in the above HTML

    $("button").on("click", function(e) {
        $("input[type=checkbox]").prop("checked", true).change();
    });
})
于 2013-04-12T12:03:02.663 に答える
2

テーブルのヘッダー インデックスを取得し、テーブル ヘッダーと td 要素を非表示にすることができます。このようなもの
テーブルヘッダーのインデックスが index = 2; であるとします。

var index= tableHeaderIndex; // 2 here

$('th:nth-child('+index+')').hide();
$('td:nth-child('+index+')').hide();
于 2013-04-12T11:45:10.513 に答える
2

このように？

すぐに固まりましたが、うまくいくはずです。

<table id="TabToHide">
    <tr>
        <td class="Col1">Col 1</td>
        <td class="Col2">Col 2</td>
        <td class="Col3">Col 3</td>
        <td class="Col4">Col 4</td>
        <td class="Col5">Col 5</td>
    </tr>
    <tr>
        <td class="Col1">Stuff 1</td>
        <td class="Col2">Stuff 2</td>
        <td class="Col3">Stuff 3</td>
        <td class="Col4">Stuff 4</td>
        <td class="Col5">Stuff 5</td>
    </tr>    
</table>

<br />

<table>
    <tr>
        <td><input name="Col1" type="checkbox" checked="checked" /></td>
        <td><input name="Col2" type="checkbox" checked="checked" /></td>
        <td><input name="Col3" type="checkbox" checked="checked" /></td>
        <td><input name="Col4" type="checkbox" checked="checked" /></td>
        <td><input name="Col5" type="checkbox" checked="checked" /></td>
    </tr>
</table>

Javascript

   $('input:checkbox').change(function(){
   var ColToHide = $(this).attr("name");    
    if(this.checked){
        $("td[class='" + ColToHide + "']").show();        
    }else{
        $("td[class='" + ColToHide + "']").hide();
    }

    $('div#Debug').text("hiding " + ColToHide);
});
于 2013-04-12T11:59:10.870 に答える