How to get the innerHTML of a cell with JavaScript DOM?

Javascript Programming Scripts HTML

In this tutorial, we will learn how to get the innerHTML of a cell with JavaScript DOM. Use the innerHTML property in JavaScript to get the innerHTML of a cell.

We can manipulate the DOM (Document Object Model) easily using document.getElementById(). It is a method that returns the element object that represents the id of the element whose id is mentioned in the method’s parameter. Since every tag’s id is unique, we can easily access the element by its id. Then the innerHTML property will help to access the text or content of that tag

Using Table cells Collection

The row and column numbers will start from 0. So if we want to access the first row, we must write row[0].

Users can follow the below syntax to get the value of the type attribute of a link.

Syntax

let Cell= document.getElementById("id").rows[rowNumber].cells;
document.getElementById("result").innerHTML = Cell[colNumber].innerHTML

In the above syntax, as the users can see that we get the access of the row using document.getElementById().rows[].Then to have access to cells, we wrote the .cells property. We accessed the cell's content using the innerHTML property in the next line.

Example

In the below example, we have made a table using the table, tr, and td tag. Then to get access to the table, we wrote the document.getElementById() method. And to access the first cell (i.e., row 1, column 1), we took the rows[0] and stored them in the “Cell” variable. Then to access the content we used the Cell[0].innerHTML.


<html>
<head>
<style>
   table,
   td {
      border: 1px solid black;
   }
</style>
</head>
<body>
   <h3> Get the innerHTML of a cell <i> Using
   document.getElementById()</i> </h3>
   <p> Click the button to get the innerHTML of 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 Here </p>
   <script>
      function getCell() {
         //Getting access to cell 1
         let Cell = document.getElementById("myTable").rows[0].cells;
         document.getElementById("result").innerHTML =
         Cell[0].innerHTML
      }
   </script>
</body>
</html>

As the users can see, after clicking the “Click Here” button, the “getCell” function was invoked, which accessed the first cell content.

Using the cells Property with User Input

To access the content of any cell in any table, we first have to access the table tag using document.getElementById(). Then as per the row and column number, we will get access to that particular cell, and we can access the content using the innerHTML property. Here we took the window object's prompt method to get the user's input. According to the user's choice, we can access that cell.

The row and column numbers will start from 0. So if we want to access the first row, we must write row[0].

Users can follow the below syntax to get the value of the type attribute of a link.

Syntax

let row = window.prompt("Enter row number");
let column = window.prompt("Enter column number");
let Cell = document.getElementById('id').rows[row].cells;
document.getElementById("result").innerHTML = Cell[col].innerHTML

In the above syntax, we took the row, column, and content of the cell from the user and accessed the content accordingly.

Example

In the below example, we have made a table using the table, tr, and td tag. Then to get access to the table, we wrote the document.getElementById() method. As previously mentioned in the syntax, we took the row, column, and content of the cell from the user and stored them in “row”, “col”, and “content” variables, respectively.


<html>
<head>
<style>
   table,
   td {
      border: 1px solid black;
   }
</style>
</head>
<body>
   <h3> Get the innerHTML of a cell using<i> document.getElementById()
   </i>with user input </h3>
   <p> Click the button to get innerHTML of a 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 Here</p>
   <script>
      function getCell() {
         let row = window.prompt("Enter row number: ", "0");
         let col = window.prompt("Enter column number", "0")
         let Cell =
         document.getElementById('myTable').rows[row].cells;
         document.getElementById("result").innerHTML =
         Cell[col].innerHTML
      }
   </script>
</body>
</html>

In this tutorial, we discussed a method to get the innerHTML of a cell with JavaScript DOM. We first access the table using a document.getElementByID() method. And then we apply the rows property to get a collection of all rows. At rows collection, we apply the cells property to get the cells collection. On the cell collection, we can apply the indexing to get a particular cell.

Shubham Vora

Updated on: 12-Oct-2022

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started