Question

我有HTML表格

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

我想使用箭头键控制这个红色单元格。

这是我的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>

Answer 1

您需要检查文档keycode事件keydown，并将"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

Answer 2

您必须在单击和按键时跟踪单元格位置（cellX，cellY）。添加一个全局按键处理程序（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";
        }

额外的测试，如

if（cellX === null）...

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

我将tbl.cells [i]更改为tbl.rows [i] .cells [j]，因为在我的设置（Firefox）table.cells [..]未定义

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

2 个答案: