Question

我尝试使用jquery选择多行但这段代码看起来像胡思乱想。

http://jsfiddle.net/hKZqS/16/。更多代码添加到上面一个。使用键盘使用shift +向上箭头或向下箭头。

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');
})

我哪里错了？

Answer 1

而不是给TR一个背景..试着给每个TD下一个TR。

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

<强>更新

好的，我改变了它！它现在工作正常..我改变了什么：

keyup - ＆gt; keydown //因为你想在“按下”键时改变颜色..
$(document).keydown( ... - ＆gt; $(window).keydown( ... //当你使用窗口（我的经验）时，它会以某种方式更好地工作。
tr.ui-selecting { background: #eee; } - ＆gt; tr.ui-selecting td { background: #eee; }
tr.ui-selected { background: #dde; } - ＆gt; tr.ui-selected td { background: #dde; }
var selected = $("tr.ui-selected").first(); - ＆gt; var selected = $("tr.ui-selected").first().find('td');
所以当你想从tr中删除该类时，我从.parent()

$("tr.ui-selected").first().find('td');

case 38: - ＆gt; case 65:代表'a'按钮（提醒（e.which） - ＆gt; 65）//为什么不向上箭头？
case ??: - ＆gt; case 83:代表's'按钮（提醒（e.which） - ＆gt; 83）//为什么不向下箭头？

这应该是它。

修改

关于转移+向上或向下箭头你也要选择!!所以，如果我是你，我会考虑你，如果你想使用Shift键

最后更新：

以下是最终代码：http://jsfiddle.net/hKZqS/36/

Answer 2

这是完整的解决方案，它选择表中的行，就像Windows文件选择一样。

将类multiSelect添加到您的表中，然后将此代码放在JS文件中

$(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;
        }
      }
      }
    });
    });

使用jquery使用shift键选择多行

2 个答案: