1

デモ

<table id="tableStudent" border="1">
  <thead>
    <tr><th>ID</th><th>Name</th>                            <th>Class</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>John</td><td>4th</td></tr>
   <tr><td>2</td><td>Jack</td><td>5th</td></tr>
   <tr><td>3</td><td>Michel</td><td>6th</td></tr>
   <tr><td>4</td><td>Mike</td><td>7th</td></tr>
       <tr><td>5</td><td>Yke</td><td>8th</td></tr>
       <tr><td>6</td><td>4ke</td><td>9th</td></tr>
       <tr><td>7</td><td>7ke</td><td>10th</td></tr>
  </tbody>
</table>

$('tr').on('click',function(e)
{
   var objTR=$(this); 

});

コントロールキーを使用して複数の行を選択する必要があります。そして学生IDを配列に格納します。jquery Click イベントを使用するにはどうすればよいですか。

4

3 に答える 3

0

これはDEMOに役立つかもしれません：

function bindMultipleSelect(element){
    var self = this;
    var isCtrlDown = false;
    element.on('click', 'tr', function(){
        var tr = $(this);
        if(!isCtrlDown)
            return;
        tr.toggleClass('ui-selected')
    })
    $(document).on('keydown', function(e){
        isCtrlDown = (e.which === 17)
    });
    $(document).on('keyup', function(e){
        isCtrlDown = !(e.which === 17)
    });
    self.getSelectedRows = function(){
        var arr = [];
        element.find('.ui-selected').each(function(){
            arr.push($(this).find('td').eq(0).text())
        })
        return arr;
    }
    return self;
}

window.myElement = bindMultipleSelect($('#tableStudent'))
于 2013-07-29T13:18:08.923 に答える
0

まず、テーブルの行を選択したことを示すいくつかのクラスを定義します。

tr.selected, tr.selected td {
    background: #ffc; /* light-red variant */
}

次に、次の jQuery イベント ハンドラを記述します。

$('table#tableStudent').on('click', 'tr', function() {
    if($(this).hasClass('selected')) {
        // this accours during the second click - unselecting the row
        $(this).removeClass('selected');
    } else {
        // here you are selecting a row, adding a new class "selected" into <tr> element.
        // you can reverse the IF condition to get this one up above, and the unselecting case down.
        $(this).addClass('selected');
    }
});

このようにして、行を選択した有効期限があります。チェックボックスなどを含む列がある場合は、上記で提供したイベント リスナー内でそのロジックを実行することをお勧めします。

于 2013-07-29T13:04:04.490 に答える