添加使用向上和向下箭頭鍵選擇表格行的功能

我需要以下問題的專家的幫助，因爲它超越了我在JavaScript中編程的知識水平。添加使用向上和向下箭頭鍵選擇表格行的功能

考慮到現有的JavaScript編碼，我該如何捎帶並添加到現有編碼中，以便爲用戶添加功能，以便用戶使用向上和向下箭頭鍵在表格中滾動時滾動瀏覽表格順便說一句，標題列豁免）它會突出顯示選定的行並更改其行顏色。

需要注意的一點是，如果現有的表格行被選中，並且我點擊了向上或向下箭頭鍵，它將移動到並突出顯示上一行和下一行。這裏的一些邏輯是，我猜測人們需要找到行索引來做到這一點。就像我說的那樣，這遠遠超出我所知道的如何去做。

非常感謝和對您的幫助非常感謝。

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
tr.normal td { 
    color: black; 
    background-color: white; 
} 
tr.highlighted td { 
    color: white; 
    background-color: red; 
} 
</style> 
</head> 
<body> 
<div id="results" class="scrollingdatagrid"> 
    <table id="mstrTable" cellspacing="0" border="1"> 
    <thead> 
     <tr> 
     <th>File Number</th> 
     <th>Date1</th> 
     <th>Date2</th> 
     <th>Status</th> 
     <th>Num.</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>KABC</td> 
     <td>09/12/2002</td> 
     <td>09/12/2002</td> 
     <td>Submitted</td> 
     <td>1</td> 

     </tr> 
     <tr> 
     <td>KCBS</td> 
     <td>09/11/2002</td> 
     <td>09/11/2002</td> 
     <td>Lockdown</td> 
     <td>2</td> 
     </tr> 

     <tr> 
     <td>WFLA</td> 
     <td>09/11/2002</td> 
     <td>09/11/2002</td> 
     <td>Submitted</td> 
     <td>3</td> 
     </tr> 
     <tr> 
     <td>WTSP</td> 
     <td>09/15/2002</td> 
     <td>09/15/2002</td> 
     <td>In-Progress</td> 
     <td>4</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

<script type="text/javascript"> 
(
function() { 
var trows = document.getElementById("mstrTable").rows; 

    for (var t = 1; t < trows.length; ++t) { 
     trow = trows[t]; 
     trow.className = "normal"; 
     trow.onclick = highlightRow; 
    }//end for 

    function highlightRow() { 
     for (var t = 1; t < trows.length; ++t) { 
      trow = trows[t]; 
      if (trow != this) { trow.className = "normal" } 
     }//end for 

     this.className = (this.className == "highlighted")?"normal":"highlighted"; 
     }//end function 



    }//end function 

)();//end script 
</script> 
</body> 
</html>

來源

2013-07-25 John Smith

http://jsfiddle.net/7ecNj/2/ –

這肯定不是最優的，但你不使用jQuery（或類似的庫）你已經招致了很多跨瀏覽器的開銷。這應該向下兼容到IE8。

Live Demo

HTML

只有改變這裏是另外的tabindex

<table tabindex='0' id="mstrTable" cellspacing="0" border="1">

//From: http://forrst.com/posts/JavaScript_Cross_Browser_Event_Binding-yMd 
var addEvent = (function(window, document) { 
    if (document.addEventListener) { 
     return function(elem, type, cb) { 
      if ((elem && !elem.length) || elem === window) { 
       elem.addEventListener(type, cb, false); 
      } 
      else if (elem && elem.length) { 
       var len = elem.length; 
       for (var i = 0; i < len; i++) { 
        addEvent(elem[i], type, cb); 
       } 
      } 
     }; 
    } 
    else if (document.attachEvent) { 
     return function (elem, type, cb) { 
      if ((elem && !elem.length) || elem === window) { 
       elem.attachEvent('on' + type, function() { return cb.call(elem, window.event) }); 
      } 
      else if (elem.length) { 
       var len = elem.length; 
       for (var i = 0; i < len; i++) { 
        addEvent(elem[i], type, cb); 
       } 
      } 
     }; 
    } 
})(this, document); 

//derived from: http://stackoverflow.com/a/10924150/402706 
function getpreviousSibling(element) { 
    var p = element; 
    do p = p.previousSibling; 
    while (p && p.nodeType != 1); 
    return p; 
} 

//derived from: http://stackoverflow.com/a/10924150/402706 
function getnextSibling(element) { 
    var p = element; 
    do p = p.nextSibling; 
    while (p && p.nodeType != 1); 
    return p; 
} 

;(function() { 
    var trows = document.getElementById("mstrTable").rows; 

    for (var t = 1; t < trows.length; ++t) { 
     trow = trows[t]; 
     trow.className = "normal"; 
     trow.onclick = highlightRow; 
    }//end for 

    function highlightRow() { 
     for (var t = 1; t < trows.length; ++t) { 
      trow = trows[t]; 
      if (trow != this) { trow.className = "normal" } 
     }//end for 

     this.className = (this.className == "highlighted")?"normal":"highlighted"; 
    }//end function 

    addEvent(document.getElementById('mstrTable'), 'keydown', function(e){ 
     var key = e.keyCode || e.which; 

     if((key === 38 || key === 40) && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey){ 

      var highlightedRows = document.querySelectorAll('.highlighted'); 

      if(highlightedRows.length > 0){ 

       var highlightedRow = highlightedRows[0]; 

       var prev = getpreviousSibling(highlightedRow); 
       var next = getnextSibling(highlightedRow); 

       if(key === 38 && prev && prev.nodeName === highlightedRow.nodeName){//up 
        highlightedRow.className = 'normal'; 
        prev.className = 'highlighted'; 
       } else if(key === 40 && next && next.nodeName === highlightedRow.nodeName){ //down 
        highlightedRow.className = 'normal'; 
        next.className = 'highlighted'; 
       } 

      } 
     } 

    }); 


})();//end script

來源

2013-07-25 02:40:56

我已創建使用JQuery here on JSBin

一般一個演示中，我們有2個任務：

高亮選中的行
選擇下一個/上排

爲了突出「點擊」行，我用這個代碼

$("#mstrTable tr").click(function(evt){ 
    var element = $(evt.target); 
    var tableElement = element.parents('table'); 
    tableElement.find('tr').removeClass('highlighted'); 
    element.parents('tr').addClass('highlighted'); 
});

要選擇next/prev行，我使用jQuery tree traversal function，但有一些例外，如tbody中沒有tr。請注意，左，右，上，下箭頭的keyCode分別爲37,39,38,40。

$(document).keypress(function(evt){ 
      var highlightedRow = $("#mstrTable .highlighted"); 
      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("highlighted"); 
      switch(evt.keyCode) 
      { 
       case 40: 
       if(nextElement.length) 
       { 
        nextElement.addClass('highlighted'); 
       } 
       else if (trElements.length) 
       { 
        $(trElements[0]).addClass('highlighted'); 
       } 
       break; 
       case 38: 
       if(prevElement.length) 
       { 
        prevElement.addClass('highlighted'); 
       } 
       else if (trElements.length) 
       { 
        $(trElements[trElements.length - 1]).addClass('highlighted'); 
       } 
       break; 
      } 
      } 
     });

來源

2013-07-25 02:48:36

我不認爲這實際上需要這麼長 - 你只需要保持當前突出顯示的行的索引。

這隻在Chrome（我沒有IE）上測試過，但它應該工作。

(function() { 


/** 
* Gets the tr at the specified row or column 
*/ 
var tbody = document.getElementsByTagName('tbody')[0]; 
function getRow(row) { 
    return tbody.getElementsByTagName('tr')[row]; 
} 

// store these so we won't have to keep recalculating 
var numRows = tbody.getElementsByTagName('tr').length; 

// index of the currently highlighted row 
var curRow = 0; 

// highlight the initially highlighted cell 
getRow(curRow).className = 'highlighted'; 




// listen for keydown event 
if (addEventListener) { 
    window.addEventListener('keydown',keydownHandler, false); 
} else if (window.attachEvent) { 
    window.attachEvent('onkeydown', keydownHandler); 
} 



// handle keydown event 
function keydownHandler (evt) { 
    // return the old cell to normal 
    getRow(curRow).className = 'normal'; 

    // increment/decrement the position of the current cell 
    // depending on the key pressed 
    if (evt.keyCode == 38 && curRow > 0) // up 
     curRow--; 
    else if (evt.keyCode == 40 && curRow < numRows-1) // down 
     curRow++; 

    // update the new cell 
    getRow(curRow).className = 'highlighted'; 
} 


})();//end script

來源

2013-07-25 02:59:27 twinlakes

看起來它工作，但我得到一個錯誤的代碼：「對象不支持這個屬性或方法「 - window.addEventListener（'keydown'，function（evt）{ –

就像我說的，它最初並不支持IE lt 9.它現在應該可以工作，但我沒有辦法在我的mac上測試IE。如果你使用的是非IE瀏覽器，那麼這裏有一個工作代碼的jsfiddle：http://jsfiddle.net/Ee7Gp/。 – twinlakes

這是完整的解決方案，它可以像Windows文件選擇一樣選擇表中的行。

添加類多選到你的表，然後放在一個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; 
     } 
     } 
     } 
    }); 
    });

來源

2014-07-10 23:57:26

添加使用向上和向下箭頭鍵選擇表格行的功能

回答

相關問題