2

曜日ごとに1時間ごとのブロックを表すテーブルグリッドを作成しようとしています。次に、テーブル内の各セルを選択可能にし、そのセルが選択されている場合はチェックボックスをオンにします。複数のセルが選択されている場合は、各セルが対応するすべてのチェックボックスをオンにします。ここに簡略化されたバージョンをまとめました：http：//jsfiddle.net/yxAjx/4/。

私は本当に選択可能なコードを入れるところまで持っています-

$(function() { $( "#selectable" ).selectable({ filter: ".block" }) });

たとえば、「火」行の最初の2つのセルをクリックしてドラッグした場合、対応するチェックボックスをオンにします。

htmlのこのセクションは使用しているソフトウェアから生成されているため、制御できないチェックボックスを含むテーブルですが、この例ではそのレイアウトを複製しています。

私のJavascriptとjQueryの知識は限られているので、これを実現する方法についてのアドバイスをいただければ幸いです。

4

1 に答える 1

3

このようなことをするのはどうですか？

$(function() {
    $( "#selectable" ).selectable({
        filter: ".block",
        selected: function( event, ui ) {
            var row = $(ui.selected).parents('tr').index(),
                col = $(ui.selected).parents('td').index();
            $('#checks').find('tr').eq(row)
                        .children('td').eq(col)
                        .children('input').addClass('checked').prop('checked', true);
            $('#checks input:not(.checked)').prop('checked', false);
        },
        unselected: function( event, ui ) {
            var row = $(ui.unselected).parents('tr').index(),
                col = $(ui.unselected).parents('td').index();
            $('#checks').find('tr').eq(row)
                        .children('td').eq(col)
                        .children('input').removeClass('checked').prop('checked', false);
        }
    });

    $('#checks input').click(function(){
        var row = $(this).parents('tr').index(),
            col = $(this).parents('td').index();
        if($(this).prop('checked')){
             $('#selectable').find('tr').eq(row)
                        .children('td').eq(col)
                        .children('div').addClass('ui-selected');
        }else{
             $('#selectable').find('tr').eq(row)
                        .children('td').eq(col)
                        .children('div').removeClass('ui-selected');
        }
    });
});

デモ：http：//jsfiddle.net/dirtyd77/yxAjx/9/

于 2013-03-01T00:02:32.743 に答える