1 
<table id="linkedin_match">
            <tr>
                <th>Name</th>
                <th>Location</th>
                <th>Industry</th>
                <th>Company</th>
                <th>Position</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
            </tr>
            <tr>
                <td>Moses Gonzales</td>
                <td>Greater Seattle Area</td>
                <td>Chemicals</td>
                <td>Superior Grocers</td>
                <td>WC Claim Manager</td>
                <td><a href="#">Invite</a></td>
                <td><input type="checkbox" id="match"/></td>
            </tr>
            <tr>
                <td>Moses Gonzales</td>
                <td>Greater Seattle Area</td>
                <td>Chemicals</td>
                <td>Superior Grocers</td>
                <td>WC Claim Manager</td>
                <td><a href="#">Invite</a></td>
                <td><input type="checkbox" id="match"/></td>
            </tr>
        </table>

上の表で、チェックボックスが選択されている場合に他の行が非表示になるようなロジックをどのように実行しますか? 行は 2 つだけに限定されません。5つかもしれないし、10かもしれないし、1つかもしれない。現在、私のコードは次のとおりです。

$('document').ready(function() {
   var tr = $('#linkedin_match tr');
});

今、私はtrをどうするかわかりません。私もJSは初めてです。ありがとう。

4

3 に答える 3

1

このようにすることができます。ids一意でなければならないのでmatch、クラス名として変更してください。

$(document).ready(function() {
    $('#linkedin_match .match').change(function(){ //bind change event to the checkboxes
        var $this = $(this);
        $('#linkedin_match').find('tr:gt(0)').not($this.closest('tr')).toggle();
        //since all trs are visible you can use toggle to toggle all the trs but not the one that is a parent of this.
       //And un checking will bring all of them back to visible state.
    });
});

フィドル

idto クラスの変更やクラスの追加を制御できない場合は、チェックボックスをターゲットにすることができます

 $('#linkedin_match :checkbox').change(function(){...});
  • gt(0) - インデックスが 0 より大きい行を選択します。つまり、最初の行を回避します。
  • closest('tr') - チェックされた要素の親 tr を取得します。
  • not($this.closest('tr')) - フィルターを追加します。つまり、現在の行を除外します。
  • toggle() - 要素の状態を切り替えます。
于 2013-09-04T19:27:17.237 に答える
1

チェックボックスを追加する

<input type="checkbox" class="check"> Check me

次に、jquery トグルを呼び出します

$('.check').click(function(){
    $('td.hide').toggle();
});

フィドル: http://jsfiddle.net/webbymatt/DLxjR/

Ps 私の例では、非表示にしたいセルにクラスを配置しました。これは、行全体にも適用できます。この場合：

<td class="hide">WC Claim Manager</td>
于 2013-09-04T19:25:41.583 に答える
1

まず、同じ ID を持つ 2 つの要素を持つべきではありません。それらをクラスに変更すると、次のことができます。

$(document).on('click', '.match', function(){ 


    if ($(this).is(':checked')) { 
        $('.match').closest('tr').hide();
        $(this).closest('tr').show(); 
    } else { $('.match').closest('tr').show(); }

});

このソリューションは、ボックスがチェックされていない場合はチェックボックス付きのすべての行を表示し、チェックボックスがチェックされている場合は関連する行のみを表示します。

于 2013-09-04T19:25:54.480 に答える