0

何よりも理論的であるため、これが適切な領域であることを願っています。現在、ユーザーが左端の列のチェックボックスをクリックしてボタンをクリックすることで、1 つまたは複数の行を選択して編集できるページに取り組んでいEditます。この機能をプログラミングしてみるかどうかはまだ決めていませんが、チェックボックスを効果的に非表示にして、ある種の JavaScript または jquery を使用して、対応する行のチェックボックスをチェックするのと同じようにテーブル内の行をクリックすることは可能でしょうか? 私は javascript と jquery を使い始めたばかりですが、これがどれほど強力であるかに戸惑っています。このタイプの機能が可能かどうか教えてください。可能であれば、この動作を実現するための一般的なアプローチは何ですか?

4

3 に答える 3

1

実行可能。方法は次のとおりです。

jsbin リンク

HTML

<table border=1>
    <tr><td><input type="checkbox"></td><td>Something 1</td><td>Something else 1</td></tr>
    <tr><td><input type="checkbox"></td><td>Something 2</td><td>Something else 2</td></tr>    
    <tr><td><input type="checkbox"></td><td>Something 3</td><td>Something else 3</td></tr>    
    <tr><td><input type="checkbox"></td><td>Something 4</td><td>Something else 4</td></tr>
</table>

jQuery

$('input[type=checkbox]').parent('td').hide(); // If JS disabled, checkboxes are still visible

$('table tr').click( function() {
    var $chk = $(this).find('input[type=checkbox]');
    $chk.prop('checked',!$chk.prop('checked'));
    $(this).toggleClass('selected'); // To show something happened
});

CSS

tr.selected{
   background-color:#ccc;
}
于 2012-12-11T18:17:55.423 に答える
1

はい、これは完全に達成可能ですが、ブラウザで JavaScript を無効にしている場合のアクセシビリティへの影響を考慮したい場合があります。

取るべきアプローチはいくつかあります。click例として、次のようなハンドラーを使用できます (テストされていません)。

$(document).on('click', '#yourtable tr', function(evt) {
    $(this).toggleClass('selected');
});

これによりtr、テーブル内のそれぞれに ( id を使用して#yourtable) クラスが与えられ、 selectedCSS を介してスタイルを設定したり、別の jQuery を介して読み戻したりすることができます。

イベント ハンドラー内では、非表示の入力フィールドを更新する、サーバーに直接ポストする、既存のチェックボックスをチェックする (必要に応じてオプションで非表示にすることもできます) など、他のアクションを実行して選択を記録することもできます。

于 2012-12-11T18:04:10.227 に答える
0

要求された機能の簡単な実装を次に示します。

$(document).ready(function() {
    $('tr').click(function(e) {
        var $checkbox = $(this).find('input');
        var isChecked = $checkbox.prop('checked');

        if (isChecked) {
            $checkbox.removeProp('checked');
        }
        else {
            $checkbox.prop('checked', 'checked');
        }
    });
});​
于 2012-12-11T18:09:51.780 に答える