Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get the innerHTML of a cell with JavaScript DOM?
In this tutorial, we will learn how to get the innerHTML of a cell with JavaScript DOM. The innerHTML property allows us to access the HTML content inside table cells by first accessing the table structure through the DOM.
We can manipulate the DOM (Document Object Model) easily using document.getElementById(). This method returns the element object that represents the element whose id is specified in the parameter. Since every element's id is unique, we can easily access specific table elements and then use the innerHTML property to retrieve the content of table cells.
Using Table Cells Collection
To access the content of any cell in a table, we first access the table using document.getElementById(). Then, using row and column numbers, we navigate to the specific cell and retrieve its content using the innerHTML property.
Note that row and column numbers start from 0. To access the first row, use rows[0].
Syntax
let cell = document.getElementById("tableId").rows[rowNumber].cells;
document.getElementById("result").innerHTML = cell[colNumber].innerHTML;
Example
In this example, we create a table and demonstrate how to get the innerHTML of the first cell (row 0, column 0):
<html>
<head>
<style>
table, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body>
<h3>Get the innerHTML of a cell using document.getElementById()</h3>
<p>Click the button to get the innerHTML of the first cell</p>
<table id="myTable">
<tr>
<td>Row1 Col1 Cell 1</td>
<td>Row1 Col2 Cell 2</td>
</tr>
<tr>
<td>Row2 Col1 Cell 3</td>
<td>Row2 Col2 Cell 4</td>
</tr>
<tr>
<td>Row3 Col1 Cell 5</td>
<td>Row3 Col2 Cell 6</td>
</tr>
</table>
<br>
<button onclick="getCell()">Click Here!</button>
<p id="result">Result will appear here</p>
<script>
function getCell() {
// Getting access to first row's cells
let cell = document.getElementById("myTable").rows[0].cells;
document.getElementById("result").innerHTML = cell[0].innerHTML;
}
</script>
</body>
</html>
After clicking the button: "Row1 Col1 Cell 1"
Using Dynamic Cell Access with User Input
We can also access any cell dynamically by taking row and column numbers as user input. This approach uses the prompt() method to get user input and then accesses the corresponding cell.
Syntax
let row = window.prompt("Enter row number");
let column = window.prompt("Enter column number");
let cell = document.getElementById('tableId').rows[row].cells;
document.getElementById("result").innerHTML = cell[column].innerHTML;
Example
This example demonstrates how to get innerHTML from any cell based on user input:
<html>
<head>
<style>
table, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body>
<h3>Get innerHTML of any cell with user input</h3>
<p>Click the button and enter row/column numbers (starting from 0)</p>
<table id="myTable">
<tr>
<td>Row1 Col1 Cell 1</td>
<td>Row1 Col2 Cell 2</td>
</tr>
<tr>
<td>Row2 Col1 Cell 3</td>
<td>Row2 Col2 Cell 4</td>
</tr>
<tr>
<td>Row3 Col1 Cell 5</td>
<td>Row3 Col2 Cell 6</td>
</tr>
</table>
<br>
<button onclick="getCellByInput()">Get Cell Content</button>
<p id="result">Result will appear here</p>
<script>
function getCellByInput() {
let row = window.prompt("Enter row number (0-2):", "0");
let col = window.prompt("Enter column number (0-1):", "0");
try {
let cell = document.getElementById('myTable').rows[row].cells;
document.getElementById("result").innerHTML = cell[col].innerHTML;
} catch (error) {
document.getElementById("result").innerHTML = "Invalid row or column number!";
}
}
</script>
</body>
</html>
Example: If user enters row=1, col=0: "Row2 Col1 Cell 3"
Key Points
- Use
document.getElementById()to access the table element - Access rows using the
rowsproperty with zero-based indexing - Access cells within a row using the
cellsproperty - Use
innerHTMLto retrieve the content of a specific cell - Always handle potential errors when working with dynamic indices
Conclusion
Getting the innerHTML of table cells in JavaScript involves accessing the table structure through the DOM hierarchy: table ? rows ? cells ? innerHTML. This approach provides flexible access to any cell content in your web applications.
8K+ Views
