如何用箭头键控制突出显示的单元格

-1

当我点击它的单元格（而不是标题）时，此单元格以红色突出显示。在同一行中的其余单元格将以粉红色突出显示。

我想用箭头键控制这个红细胞。

这里是我的HTML代码：

<html> 
    <head> 
     <title>Table Highlight</title> 
    </head> 

    <style> 
     .highlighted{ 
      color: white; 
      background-color: red; 
     } 

     tr.normal td { 
      color: black; 
      background-color: white; 
     } 

     .highlighted1 { 
      color: white; 
      background-color: pink; 
     } 
    </style> 

    <body onLoad="onLoad()" > 
     <table id="tbl" border="1"> 
      <tr> 
       <td style="width:70">Id 
       <td style="width:70">Name 
       <td style="width:70">Year 
       <td style="width:70">Task 
      </tr> 
      <tr> 
       <td style="height:20"> 
       <td style="height:20"> 
       <td style="height:20"> 
       <td style="height:20"> 
      </tr> 
      <tr> 
       <td style="height:20"> 
       <td style="height:20"> 
       <td style="height:20"> 
       <td style="height:20"> 
      </tr> 
      <tr>    
       <td style="height:20"> 
       <td style="height:20"> 
       <td style="height:20"> 
       <td style="height:20"> 
      </tr> 
     </table> 
     <script> 
      tbl = document.getElementById('tbl'); 
      tbl2 = document.getElementById('tbl'); 
      cnt = 0; 
      function onLoad() { 
       td = document.getElementsByTagName('td'); 
       for(j=4;j<td.length;j++){ 
        td[j].innerHTML = "&nbsp;"; 
        td[j].onclick = function(){highlight(this)} 
        td[j].onkeydown=function(){key_highlight(event)} 
       } 
      } 

      function key_highlight(oo) { 
       td = document.getElementsByTagName('td'); 

       for(n=1;i<tbl2.rows;n++){ 
        cnt=0; 
        /* 
        if(cnt > tbl2[i].cells.length) return; 
         highlight(tbl2[i]); 
        }*/ 
        alert(); 

        //if(oo.keyCode==39) 
        if(cnt>tbl2.rows[n].cells.length) return; 
        highlight(tbl2[n].cells); 
        cnt++; 
       } 
      } 

      function highlight(o) { 
       for (i=0; i<tbl.cells.length; i++){ 
        tbl.cells[i].className="normal"; 
        tbl.cells[i].parentNode.className="normal"; 
       } 
       o.parentNode.className = (o.className == "highlighted1")?"normal":"highlighted1";; 
       o.className=(o.className == "highlighted")?"normal":"highlighted"; 
      } 
     </script> 
    </body>

来源

2014-10-09 Saidalo

您需要检查keycode上事件的文件和应用"highlighted" class各自的td。

HTML：

<table id="tbl" border="1"> 
     <tr> 
      <td style="width:70" class="highlighted">Id</td> 
      <td style="width:70">Name</td> 
      <td style="width:70">Year</td> 
      <td style="width:70">Task</td> 
     </tr> 
     <tr> 
      <td style="height:20"> 1</td> 
      <td style="height:20"> Bob</td> 
      <td style="height:20"> 1998</td> 
      <td style="height:20"> NA</td> 
     </tr> 
     <tr> 
      <td style="height:20">2</td> 
      <td style="height:20">Maz</td> 
      <td style="height:20">2000</td> 
      <td style="height:20">QA</td> 
     </tr> 
     <tr>    
      <td style="height:20">3</td> 
      <td style="height:20">Mary</td> 
      <td style="height:20">1999</td> 
      <td style="height:20">Code</td> 
     </tr> 
    </table>

jQuery代码：

var active; 
$(document).keydown(function(e){ 
    active = $('td.highlighted').removeClass('highlighted'); 
    var x = active.index(); 
    var y = active.closest('tr').index(); 
    if (e.keyCode == 37) { 
     x--; 
    } 
    if (e.keyCode == 38) { 
     y--; 
    } 
    if (e.keyCode == 39) { 
     x++ 
    } 
    if (e.keyCode == 40) { 
     y++ 
    } 
    active = $('tr').eq(y).find('td').eq(x).addClass('highlighted'); 
});

参考fiddle for live Demo

来源

2014-10-09 07:59:47 Mazzu

@ user152251，你罚款与解释？ – Mazzu 2014-10-10 11:29:42

你要跟踪的细胞位置（cellX，小区j）都当你点击和当你按下关键。添加全局按键处理程序（document.onkeydown =），并根据按下的按键增加或减少cellX和cellY。

再检查一下运行小提琴：

http://jsfiddle.net/aehq9c6f/1/

 tbl = document.getElementById('tbl'); 
     tbl2 = document.getElementById('tbl'); 

     var cellX=null; 
     var cellY=null; 

     document.onkeydown = keyPressed; 

     cnt = 0; 
     function onLoad() { 
      td = document.getElementsByTagName('td'); 
      for(j=4;j<td.length;j++){ 
       td[j].innerHTML = "&nbsp;"; 
       td[j].onclick = function(){highlight(this)} 
       td[j].onkeydown=function(){key_highlight(event)} 
      } 
     } 
     function keyPressed(e) { 
      var code; 
      if (!e) var e = window.event; 
      if (e.keyCode) code = e.keyCode; 
      else if (e.which) code = e.which; 

      var KeyVal=getCharDesc(code); 


      var maxX=4; 
      var maxY=4; 

      if(KeyVal=="left") { 
       if(cellX===null) cellX=maxX; 
       if(cellY===null) cellY=maxY/2; 
       cellX--; 
       if(cellX<0) cellX=maxX-1; 
       highlight(tbl.rows[cellY].cells[cellX]); 
      } else if(KeyVal=="right") { 
       if(cellX===null) cellX=-1; 
       if(cellY===null) cellY=maxY/2; 
       cellX++; 
       if(cellX>maxX-1) cellX=0; 
       highlight(tbl.rows[cellY].cells[cellX]); 
      } else if(KeyVal=="up") { 
       if(cellX===null) cellX=maxX/2; 
       if(cellY===null) cellY=maxY; 
       cellY--; 
       if(cellY<1) cellY=maxY-1; // avoid top row 
       highlight(tbl.rows[cellY].cells[cellX]); 
      } else if(KeyVal=="down") { 
       if(cellX===null) cellX=maxX/2; 
       if(cellY===null) cellY=0; // avoid top row 
       cellY++; 
       if(cellY>maxY-1) cellY=1; // avoid top row 
       highlight(tbl.rows[cellY].cells[cellX]); 
      } 


     } 
     function getCharDesc(char_code) { 
      switch(char_code) { 
       case 37:return "left"; 
       case 38:return "up"; 
       case 39:return "right"; 
       case 40:return "down"; 
      } 
     } 

     function highlight(o) { 
      for (var i = 0, row; row = tbl.rows[i]; i++) { 
       for (var j = 0, col; col = row.cells[j]; j++) { 
        row.cells[j].className="normal"; 
        row.cells[j].parentNode.className="normal"; 
        if(row.cells[j]===o) { 
         cellX=j; 
         cellY=i; 
         // alert(cellX+", "+cellY); 
        } 
       } 
      } 
      o.parentNode.className = (o.className == "highlighted1")?"normal":"highlighted1";; 
      o.className=(o.className == "highlighted")?"normal":"highlighted"; 
     }

额外的测试，如

如果（cellX ===空）...

是让第一次按键，如果没有选择任何东西（cellX和cellY为空），如果你点击左边，光标将从右边开始等等。（窗口必须有焦点，所以首先点击窗口来测试）。

我改变tbl.cells [I]到tbl.rows [I] .cells [J]。因为我的设置（火狐）table.cells [..]没有定义

来源

2014-10-09 08:22:42 FrancescoMM

如何用箭头键控制突出显示的单元格

回答

相关问题