4

我需要专家的帮助来解决下面的问题，因为它超出了我对 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>
4

4 回答 4

3

这当然不是最优的，但是由于您没有使用 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
于 2013-07-25T02:40:56.473 回答
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
于 2013-07-25T02:59:27.473 回答
1

我在 JSBin 上使用 JQuery 创建了一个演示

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

  • 突出显示选定的行
  • 选择下一个/上一行

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

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

要选择下一行/上一行，我使用 jQuery树遍历函数，但当tr您的tbody. 请注意，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-25T02:48:36.640 回答
0

这是一个完整的解决方案，它可以像 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;
        }
      }
      }
    });
    });
于 2014-07-10T23:57:26.453 回答