Reputation: 99
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: 10819
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
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
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
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