Используйте клавиши со стрелками для перемещения по таблице HTML.

Сделайте за меня ?

 

@ara05ru вот я вам подсказал, вам это что то дало?

Код (Javascript):

1. var td = document.querySelectorAll('td');
2.  
3. if(td.length !== 0)
4. {
5.     [].forEach.call(td, function(item)
6.     {
7.         console.log(item);
8.     } );
9. }

 

@ara05ru держите, серавну ничему не научитесь

Код (Javascript):

1. <table>
2.   <tbody>
3.     <tr>
4.       <td>1</td>
5.       <td>2</td>
6.       <td>3</td>
7.       <td>4</td>
8.     </tr>
9.     <tr>
10.       <td>5</td>
11.       <td>6</td>
12.       <td>7</td>
13.       <td>8</td>
14.     </tr>
15.     <tr>
16.       <td>9</td>
17.       <td>10</td>
18.       <td>11</td>
19.       <td>12</td>
20.     </tr>
21.     <tr>
22.       <td>13</td>
23.       <td>14</td>
24.       <td>15</td>
25.       <td>16</td>
26.     </tr>
27.   </tbody>
28. </table>
29. <script>
30. var td = document.querySelectorAll('td');
31.  
32. if(td.length !== 0)
33. {
34.     var start = td[0];
35.  
36.     [].forEach.call(td, function(item)
37.     {
38.         item.addEventListener( 'click', function()
39.         {
40.             start.style.backgroundColor = '';
41.             start.style.color = '';
42.             start = this;
43.             start.focus();
44.             start.style.backgroundColor = 'green';
45.             start.style.color = 'white';
46.         } );
47.  
48.     });
49. }
50.  
51. document.addEventListener('keydown', function(e)
52. {
53.     e = e || window.event;
54.     if (e.keyCode == '38') {
55.         // up arrow
56.         var idx = start.cellIndex;
57.         var nextrow = start.parentElement.previousElementSibling;
58.         if (nextrow != null) {
59.         var sibling = nextrow.cells[idx];
60.         dotheneedful(sibling);
61.         }
62.     } else if (e.keyCode == '40') {
63.         // down arrow
64.         var idx = start.cellIndex;
65.         var nextrow = start.parentElement.nextElementSibling;
66.         if (nextrow != null) {
67.         var sibling = nextrow.cells[idx];
68.         dotheneedful(sibling);
69.         }
70.     } else if (e.keyCode == '37') {
71.         // left arrow
72.         var sibling = start.previousElementSibling;
73.         dotheneedful(sibling);
74.     } else if (e.keyCode == '39') {
75.         // right arrow
76.         var sibling = start.nextElementSibling;
77.         dotheneedful(sibling);
78.     }
79. } );
80.  
81.  
82. function dotheneedful(sibling) {
83.   if (sibling != null)
84.   {
85.     start.focus();
86.     start.style.backgroundColor = '';
87.     start.style.color = '';
88.     sibling.focus();
89.     sibling.style.backgroundColor = 'green';
90.     sibling.style.color = 'white';
91.     start = sibling;
92.   }
93. }
94. </script>    

 

@ara05ru ну вам то пользы никакой, вы ничему не научились, скопировали чужой код. Что либо сделать вы с ним не сможете. Учить мне вас чему то желания нет, поэтому и показал готовый код =)

 

Замените вот тут все одной строчкой, поймете как, считайте что поняли как работает

Код (Javascript):

1. item.addEventListener( 'click', function()
2.         {
3.  
4.            // тут нужна одна строка
5.  
6.             /*start.style.backgroundColor = '';
7.             start.style.color = '';
8.             start = this;
9.             start.focus();
10.             start.style.backgroundColor = 'green';
11.             start.style.color = 'white';*/
12.         } );