Question

我在下面的问题上需要专家的帮助，因为它超出了我在JavaScript编程方面的知识水平。

鉴于下面现有的JavaScript编码，我如何能够捎带并添加到现有编码上，以便为用户添加功能，使用他们的向上和向下箭头键滚动表格，同时滚动浏览（btw标题列豁免）它会突出显示所选行并更改其行颜色。

需要注意的是，如果选择了现有的表格行，并且我点击了我的向上或向下箭头键，它就会移动并突出显示上一行和下一行。这里的一些逻辑是我猜测需要找到行索引来执行此操作。就像我说的那样，它远远超出我所知道的范围。

非常感谢并非常感谢您的帮助。

<!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>

Answer 1

这当然不是最佳选择，但由于您没有使用jQuery（或类似的库），因此会产生大量的跨浏览器开销。这应该向后兼容IE8。

的 Live Demo

<强> HTML

此处只更改tabindex

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

<强> JS

//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

Answer 2

我认为这实际上不需要那么久 - 你只需要保留当前突出显示的行的索引。

这只在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

Answer 3

我使用JQuery here on JSBin

创建了一个演示

一般来说，我们有两项任务：

突出显示所选行
选择next / prev row

要突出显示“点击”行，我使用此代码

$("#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行，我会在tr内没有tbody的情况下使用jQuery tree traversal function。请注意，左，右，上，下箭头的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;
            }
          }
        });

Answer 4

这是完整的解决方案，它选择表中的行，就像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;
        }
      }
      }
    });
    });

添加使用向上和向下箭头键选择表格行的功能

4 个答案: