Problem:
Recently I came across a problem in which I was given an Html table and was asked to write a JavaScript code that would allow the user to change the content of the table by entering first the cell number, then the row number and finally the content that needs to be added. The user should be able to do this by the click of the button.
This is what the Solution should look like:
| Row1 Cell1 | Row1 Cell2 |
| Row2 Cell1 | Row2 Cell2 |
| Row3 Cell1 | Row3 Cell2 |
The following is the HTML code for the table:
<!DOCTYPE html>
<html>
<head>
<br><meta charset="UTF-8" />
<title>Change the content of the cell</title>
</head>
<body>
<table border="1">
<tr>
<td>Row1 Cell1</td>
<td>Row1 Cell2</td>
</tr>
<tr>
<td>Row2 Cell1</td>
<td>Row2 Cell2</td>
</tr>
<tr>
<td>Row3 Cell1</td>
<td>Row3 Cell2</td>
</tr>
</table>
<form>
<input type="button" onclick="changeContent()" value="Change Content" />
</form>
</body>
</html>
Solution:
There are many ways that this problem can be solved. I would try to solve this problem in two ways. We will use the same input methods in both the cases, that would be 3 prompts that would ask for the 1) row number, 2) column number and finally the 3) content. We will write a function for this by the name changeContent() that would be called when the user clicks the button.
This is how our initial code would look like:
<script>
function changeContent(){
var row = prompt("Enter Row Number:" , "1");
var col = prompt("Enter Col Number:", "2");
var data = prompt("Enter Content:", "data");
row--; //This is done because arrays start count from 0;
col--;
// The code that we are interested in goes here.
}
</script>
Method 1)
If you can’t or don’t want to change the HTML code at all, then this is what you should do to solve this problem:
var MYrow = document.getElementsByTagName("tr")[row] ;
MYrow.getElementsByTagName("td")[col].innerHTML = data;
This is the same as:
document.getElementsByTagName("tr")[row].getElementsByTagName("td")[col].innerHTML = data;
How it works?
There are different functions by which you can select the desired Document Object. One of them is getElementsByTagName(). In this function, you have to pass the name of the Object Tags, for example, the tag for a paragraph is <p> and the Tag name would be “p”. The function would return all the elements having the given tag name in an array list. You can then choose the one you want by entering its number. They would be numbered according to their order of appearance in the HTML code. So, if there are 5 <tr> tags in an HTML page, to access the inner HTML of the 3rd <tr> tag, I would write:
document.getElementsById("tr")[2].innerHTML ;
Method 2)
The best method to solve this problem is to first modify the HTML code to add an id to the <table> tag:
...
<body>
<table border="1" id="myTable">
<tr>
...
Now the following code will solve our problem:
document.getElementById("myTable").rows[row].cells[col].innerHTML = data;
How it works?
In this case we have selected our desired HTML Object by using the function getElementById(). As ids are unique, this function would return the element with the id that we input. This is the reason why we had to edit the HTML code in the first place.
In JavaScript, you can access the rows and cells of any table by using .rows[] and .cells[] , the only thing that you need to make sure of is that your element must be a <table> element.