javascript - selecting multiple rows using shift key using jquery - Stack Overflow

admin管理员组

文章数量:1421031

I tried doing selecting multiple rows using jquery but this code look like cranky.

/ .some more code added to above one.using shift + up arrow or down arrow using key board.

case 13:  
                var c = (e.keyCode ? e.keyCode : e.which);
                var d =$(this).data('ID');
if(c == 13) { //Enter keycode

    if(d != undefined){
        window.open('k.php?q=' + d);
    }

}
break;        
}

$("#myTable tbody tr").shiftKeypress(function() {
    $(this).toggleClass('selectmouse');
})

where am i going wrong?

I tried doing selecting multiple rows using jquery but this code look like cranky.

http://jsfiddle/hKZqS/16/ .some more code added to above one.using shift + up arrow or down arrow using key board.

case 13:  
                var c = (e.keyCode ? e.keyCode : e.which);
                var d =$(this).data('ID');
if(c == 13) { //Enter keycode

    if(d != undefined){
        window.open('k.php?q=' + d);
    }

}
break;        
}

$("#myTable tbody tr").shiftKeypress(function() {
    $(this).toggleClass('selectmouse');
})

where am i going wrong?

• javascript
• jquery

Share Improve this question Follow edited Oct 15, 2014 at 14:15 Quinn Wilson 8,23311 gold badge2424 silver badges3131 bronze badges asked Mar 27, 2011 at 10:26 user648276user648276

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Instead of given the TR a background.. try to give every TD underneave the TR.

$("#myTable tbody tr").shiftKeypress(function() {
    $(this).find('td').toggleClass('selectmouse');
})

UPDATE:

Okay, I've changed it! It's working fine now.. What I changed:

• keyup -> keydown //because you want to change the color when u "PRESS" an key..
• $(document).keydown(... -> $(window).keydown(... // just somehow it works better when you doing with window(my experience).
• tr.ui-selecting { background: #eee; } -> tr.ui-selecting td { background: #eee; }
• tr.ui-selected { background: #dde; } -> tr.ui-selected td { background: #dde; }
• var selected = $("tr.ui-selected").first(); -> var selected = $("tr.ui-selected").first().find('td');
• and so when you want to remove the class from the tr i took the .parent() from the $("tr.ui-selected").first().find('td');
• case 38: -> case 65: for the 'a' button (alert(e.which) -> 65) // why not arrow up?
• case ??: -> case 83: for the 's' button (alert(e.which) -> 83) // why not arrow down?

This should be it.

EDIT:

About the shift + arrow up or down you going to select as well!! So if I were you I would consider it if you want to use shift key

LAST UPDATE:

Here is the final code: http://jsfiddle/hKZqS/36/

Here is the plete solution which selects rows in table just like a windows file selection works.

add class multiSelect to you table and then place this code in a JS file

$(document).ready(function() {  
var selectionPivot; 
// code for selected rows. 
$('.multiSelect tbody').on( 'click', 'tr', function (e) {
var tbodyElement = $(this).parents('tbody');
var trElements = tbodyElement.find('tr');
if(!e.ctrlKey && (!e.shiftKey) ){   
  trElements.removeClass("row_selected");
  selectionPivot=$(this);
 } 

if(e.shiftKey){ 
var bot = Math.min(selectionPivot[0].rowIndex, $(this)[0].rowIndex);
var top = Math.max(selectionPivot[0].rowIndex, $(this)[0].rowIndex);
trElements.removeClass("row_selected");
for(var i=bot; i<=top; i++){    
trElements[i-1].className+=" row_selected";
}     
}  
else  { 
   selectionPivot=$(this);
   trElements.removeClass("focus"); 
   $(this).addClass('focus');
    if ( $(this).hasClass('row_selected') ) {
    $(this).removeClass('row_selected');
    }
    else {      
        $(this).addClass('row_selected');
    }
}
});

$(document).keypress(function(evt){
if(evt.shiftKey){
      var highlightedRow = $(".multiSelect .focus");        
      if (highlightedRow.length > 0) // table cell is selected
      {
        var tbodyElement = highlightedRow.parents('tbody');
        var trElements = tbodyElement.find('tr');
        var nextElement =  highlightedRow.next('tr');
        var prevElement = highlightedRow.prev('tr');
        trElements.removeClass("focus");
        switch(evt.keyCode)
        {
          case 40:
            if(nextElement.length)
            {
              nextElement.addClass('row_selected');
              nextElement.addClass('focus');
            }
            else if (trElements.length)
            {
              $(trElements[0]).addClass('row_selected'); 
               $(trElements[0]).addClass('focus');
            }
            break;
          case 38:
            if(prevElement.length)
            {
              prevElement.addClass('row_selected');
              prevElement.addClass('focus');
            }
            else if (trElements.length)
            {
              $(trElements[trElements.length - 1]).addClass('row_selected'); 
                $(trElements[trElements.length - 1]).addClass('focus');
            }
            break;
        }
      }
      }
    });
    });

本文标签： javascriptselecting multiple rows using shift key using jqueryStack Overflow