Изменить текст в определенной ячейке таблицы с помощью пользовательского ввода и Javascript

Question

Как можно изменить содержимое ячейки на основе пользовательского ввода?

Пользователь должен иметь возможность изменять как ячейку, так и текст в этой ячейке.

Это пример таблицы, которую я хочу использовать (без td id):

<table border="1" id="tbl">
  <tr><td>text</td><td>text</td><td>text</td></tr>
  <tr><td>text</td><td>text</td><td>text</td></tr>
</table>

Это некоторые поля ввода, я думаю:

<label for="row">Row: </label>
<input type="number" id="row" value="1" />

<label for="col">Column: </label>
<input type="number" id="col" value="1" />

<label for="textOut">Tekst: </label>
<input type="text" id="tblText" name="text" value="Some text"/>

<button onclick="changeTable()">Change cell</button>

И вот тут я заблудился ... Я часами искал в Интернете и пробовал много разных вещей, но я полностью застрял. Не нужно говорить, что я действительно новичок в JavaScript ...

var tbl = document.getElementById("tbl");

function changeTable () {
  var row = document.getElementById("tbl").rows;
  var col = row[0].cells;
  col[0].innerHTML = document.getElementById("tblText").value;
}

Answer 1

Если вы ввели правильные существующие Строка и Столбец , ваша функция changeTable должна быть

function changeTable(){
  // Get all the rows of the table
  var rows = document.getElementById("tbl").rows;

  // Target row and col index
  var targetRow = document.getElementById("row").value;
  var targetCol = document.getElementById("col").value;

  // Target row with all its cells
  var targetRowCells = rows[targetRow].cells;

  // Target row with the target col (target cell) changed with the new value
  targetRowCells[targetCol].innerHTML = document.getElementById("tblText").value;

}

Answer 2

Ты уже довольно далеко. Все, что вам нужно было сделать, это получить целевую строку и столбец, компенсировать массив, начинающийся с 0, проверить ввод пользователя не менее 1 и не более, чем размер столбцов и строк.

Если вы не подтвердите ввод пользователя, вы можете получить ошибки, если введете число меньше 1 или больше, чем число столбцов, поэтому я использовал функции Math.min и Math.max. Минимальный 0 и максимальный размер столбцов / строк с компенсацией для массивов, начинающихся с 0.

В качестве альтернативы вы можете вызвать предупреждение, если пользователь вводит значение, большее или меньшее допустимого.

var tbl = document.getElementById("tbl");

function changeTable(){
  var rowUserInput = parseInt(document.getElementById("row").value)-1; // user input compensated for arrays starting at 0
  var colUserInput = parseInt(document.getElementById("col").value)-1; // user input compensated for arrays starting at 0
  var row = document.getElementById("tbl").rows;
  var targetRow = Math.min(Math.max(rowUserInput
        , 0), // we want the maximum of user input and 0, so the value to use will never be less then 0
        row.length - 1); // we want the minimum of user input and the number of rows compensated for arrays starting at 0, so we will never try to change a row higher then exists
  var col = row[targetRow].cells;
  var targetCol = Math.min(Math.max(colUserInput    
    , 0), // we want the maximum of user input and 0, so the value to use will never be less then 0
    col.length - 1); // we want the minimum of user input and the number of columns compensated for arrays starting at 0, so we will never try to change a column higher then exists
 
  if(rowUserInput !== targetRow) {
    console.log('You tried to use a non existing row!');
  }
  
  if(colUserInput !== targetCol) {
    console.log('You tried to use a non existing column!');
  }
 
  col[targetCol].innerHTML = document.getElementById("tblText").value;
}

<table border="1" id="tbl">
  <tr><td>text row 1</td><td>text</td><td>text</td></tr>
  <tr><td>text row 2</td><td>text</td><td>text</td></tr>
</table>

<label for="row">Row: </label>
<input type="number" id="row" value="1" />

<label for="col">Column: </label>
<input type="number" id="col" value="1" />

<label for="textOut">Tekst: </label>
<input type="text" id="tblText" name="text" value="Some text" />
<button onclick="changeTable()">Change cell</button>

Answer 3

var tbl = document.getElementById("tbl");

function changeTable () {
  var row = document.getElementById("tbl").rows;
  var r= document.getElementById("row").value
  var c= document.getElementById("col").value
  var col = row[r].cells;
  col[c].innerHTML = document.getElementById("tblText").value;
}

Вы забыли прочитать номер строки и столбца из тега ввода. Здесь я объявил две переменные с именами r и c для значения строки и значения столбца.

Answer 4

Вам просто нужно получить входные значения строки и столбца и передать их индексы.

var tbl = document.getElementById("tbl");

function changeTable(){
  const rowId = document.getElementById("row").value;
  const colId = document.getElementById("col").value;
  
  var row = document.getElementById("tbl").rows;
  var col = row[rowId - 1].cells;
  col[colId - 1].innerHTML = document.getElementById("tblText").value;
}

 <table border="1" id="tbl">
  <tr><td>text</td><td>text</td><td>text</td></tr>
  <tr><td>text</td><td>text</td><td>text</td></tr>
</table>
<label for="row">Row: </label>
<input type="number" id="row" value="1" />

<label for="col">Column: </label>
<input type="number" id="col" value="1" />

<label for="textOut">Tekst: </label>
<input type="text" id="tblText" name="text" value="Some text" />
<button onclick="changeTable()">Change cell</button>