Добавление кнопок вверх, вниз, влево, вправо, чтобы выбрать ячейку

У меня есть простой вопрос для вас. У меня есть код здесь, который позволяет пользователю рассказать, сколько строк и столбцов они хотят в таблице. У меня это уже выяснилось. Я не могу понять, как добавить кнопки «Вверх», «Вниз», «Влево» и «Вправо», чтобы они могли выбрать определенную ячейку в таблице. Вот то, что мне это нужно выглядеть следующим образом:Добавление кнопок вверх, вниз, влево, вправо, чтобы выбрать ячейку

What I need it to look like

Вот код, который я до сих пор:

Javascript:

function createTable() 
{ 
var num_rows = document.getElementById('rows').value; 
var num_columns = document.getElementById('columns').value; 
var theader = '<table border="1">\n'; 
var tbody = ''; 

for(var i=0; i<num_rows;i++) 
{ 
    tbody += '<tr>'; 
    for(var j=0; j<num_columns;j++) 
    { 
     tbody += '<td>'; 
     tbody += 'Cell ' + i + ',' + j; 
     tbody += '</td>' 
    } 
    tbody += '</tr>\n'; 
} 
var tfooter = '</table>'; 
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
}

HTML:

<form name="tablegen"> 

    <label># of Rows: <input type="text" name="rows" id="rows"/></label> <br/><br /> 

    <label># of Columns: <input type="text" name="columns" id="columns"/> </label><br/><br /> 

    <input name="generate" type="button" value="Generate" onclick='createTable();'/><br /><br /> 
</form> 

<div id="wrapper"></div>

Как я могу взять этот код и добавить кнопки в свою таблицу, чтобы выбрать определенную ячейку?

Благодарим вас за отзыв и помощь!

источник

2016-02-25 Heyhey

Что вы имеете в виду под "выбрать" ячейку? –

Я имею в виду, я хочу покрасить (выбрать) одну ячейку таблицы. Сделать навигационные кнопки перемещать выделение в таблице. Если я нажму кнопку «вверх», он перейдет к ячейке над ней. Если я нажму на правую кнопку, он переместит выделение вправо. – Heyhey

Дайте каждой ячейке уникальный идентификатор. Идентификаторы ячеек 1-й ячейки: 11, 12, 13, ..., 1 n; строка 2 ячейки: 21, 22, 23, ..., 2 n. Имейте свойство переменной или объекта, которое отслеживает активную ячейку (выделенный). Нажав кнопку, введите идентификатор соответствующей ячейки, добавив или вычитая из соответствующей цифры идентификатора ячейки.

Например:

<style> 
#tab{ 
    height: 102px; 
    width: 102px; 
    display:inline-block; 
    border:1px solid black; 
    background-color: white; 
} 
td{ 
    border: .5px solid blue; 
    height: 20px; 
    width: 20px; 
} 
</style> 

<body> 

    <div id ="main"> 
    <table id="tab"> 
    </table> 
    </div> 
    <button id="up">up</button> 
    <button id="down">down</button> 

    <script> 
    window.onload = function(){ 
     function genGrid(n,m){ 
     for (var i = 0; i<n;i++){ 
      var row = document.createElement('tr') 
      row.id = "row"+i 
      for(var j=0; j<m;j++){ 
      var cell = document.createElement('td') 
       cell.id = String(i+1)+String(j+1) 
       cell.innerText = cell.id 
       cell.style.color = "red" 

      row.appendChild(cell) 
      } 
      document.getElementById("tab").appendChild(row) 
     } 
     } 
     genGrid(4,4) 

     // manually choosing active cell and bg color 
     var activeCell = "11" 
     document.getElementById("11").style.backgroundColor = "yellow" 

     document.getElementById('up').onclick = function(){ 
     var newId = parseInt(activeCell.slice(0,1))-1 
      if(newId > 0){ 
      var oldCell =document.getElementById(activeCell) 
      oldCell.style.backgroundColor = "white" 

      var id = String(newId)+activeCell.slice(1,2) 
      var newCell = document.getElementById(id) 
      newCell.style.backgroundColor = "yellow" 

      activeCell = id 
     } 
     } 
     document.getElementById('down').onclick = function(){ 
     var newId = parseInt(activeCell.slice(0,1))+1 
     var rowLength = document.getElementsByTagName('tr').length 

     if(newId <= rowLength){ 
      var oldCell =document.getElementById(activeCell) 
      oldCell.style.backgroundColor = "white" 

      var id = String(newId)+activeCell.slice(1,2) 
      var newCell = document.getElementById(id) 
       newCell.style.backgroundColor = "yellow" 
      activeCell = id 
     } 
     } 

    } 
    </script> 
</body>

источник

2016-02-25 18:42:59 nick

Можете ли вы привести пример с js скрипкой? – Heyhey

Думаю, я просто не понимаю, что вы говорите. Я новичок в javascript ... Я узнал немного, но не много – Heyhey

Что вы не понимаете? –

Добавление кнопок вверх, вниз, влево, вправо, чтобы выбрать ячейку

ответ

Смежные вопросы