CODEWITHSUNDEEP
javascripthtmldominputhtml-table
Senseless
Senseless

Reputation: 99

Change text in specific table cell by user input and Javascript

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

Upvotes: 2

Views: 10807

Answers (4)

Jonathan
Jonathan

Reputation: 1453

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>

Upvotes: 3

Naren P
Naren P

Reputation: 214

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.

Upvotes: 2

Boris EKUE-HETTAH
Boris EKUE-HETTAH

Reputation: 157

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;

}

Upvotes: 1

Eugene Mihaylin
Eugene Mihaylin

Reputation: 1776

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>

Upvotes: 1

Related Questions