CODEWITHSUNDEEP
javascriptjquery
user648276
user648276

Reputation:

selecting multiple rows using shift key using jquery

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

http://jsfiddle.net/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?

Upvotes: 0

Views: 6955

Answers (2)

Mandeep Singh
Mandeep Singh

Reputation: 1

Here is the complete 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;
        }
      }
      }
    });
    });

Upvotes: 0

Yoram de Langen
Yoram de Langen

Reputation: 5499

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.net/hKZqS/36/

Upvotes: 4

Related Questions