Change text in specific table cell by user input and Javascript

Question

How can a change the content of a cell based on user input?

The user should be able to change both the cell and the text in that cell.

This is an example of the table I want to use (without 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>

This is some input fields, I guess:

<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>

And this is where I get lost... I've searched the web for hours, and I've tried many different things, but I'm completely stuck. No need to say I'm really new to 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;
}

marc_s · Accepted Answer · 2019-05-25 19:44:09Z

You got pretty far already. Al you needed to do is get the target row and column, compensate for an array starting at 0, validate user input to be no less then 1 and no more then the size of columns and rows.

If you don't validate user input you can get errors if you enter a number below 1 or greater then the number of columns, therefore I used the Math.min and Math.max functions. Min 0 and Max size of columns/rows compensated for arrays starting at 0.

Alternatively you could pop up an alert if the user enters a value greater or smaller then allowed.

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>

Eugene Mihaylin · Accepted Answer · 2018-11-16 10:06:35Z

2

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;
}

You forgot to read the row and col number from input tag. Here I have declared two variable named r and c for row value and column value.

edited Nov 16, 2018 at 10:06

Eugene Mihaylin

1,8743 gold badges21 silver badges33 bronze badges

answered Oct 31, 2018 at 9:18

Naren P

2143 silver badges15 bronze badges

1 Comment

Senseless Over a year ago

Thank you! This really helped. I just changed row[r] to row [r-1] and col[c] to col[c-1]. I believe that's because tables follows the same logic as an array, maybe?

Eugene Mihaylin · Accepted Answer · 2018-10-31 09:18:25Z

1

You simply need to get input row and col value and pass thier indexes.

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>

answered Oct 31, 2018 at 9:18

Eugene Mihaylin

1,8743 gold badges21 silver badges33 bronze badges

1 Comment

Eugene Mihaylin Over a year ago

then you can add some validation about correct index value

Boris EKUE-HETTAH · Accepted Answer · 2018-10-31 09:48:39Z

1

Assuming you enter correct existing Row and Column numbers, your function changeTable should be

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;

}

answered Oct 31, 2018 at 9:48

Boris EKUE-HETTAH

1571 silver badge9 bronze badges

Collectives™ on Stack Overflow

Change text in specific table cell by user input and Javascript

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related