JavaScript - Loop Through Table Cells using JS

Last Updated : 02 Dec, 2024

To loop through table cells in JavaScript, you can use various methods to iterate over the rows and cells in an HTML table. This allows you to manipulate or retrieve data from each cell as needed. Below are some practical approaches.

1. Using the for Loop

The for loop is a simple and traditional way to iterate through table rows and cells. The for loop iterates through rows and cells, giving you control over the loop and access to each cell's content.

HTML

<!DOCTYPE html>
<html lang="en">
<body>
    <table id="myTable" border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </table>
    <button onclick="loopThroughTable()">Loop Through Table Cells</button>
    <script>
        function loopThroughTable() {
            let table = document.getElementById("myTable");
            for (let i = 0; i < table.rows.length; i++) { 
               // Loop through rows
                let row = table.rows[i];
               // Loop through cells in each row
                for (let j = 0; j < row.cells.length; j++) { 
                  // Change background color of cell
                    row.cells[j].style.backgroundColor = "yellow";  
                }
            }
        }
    </script>
</body>
</html>

2. Using forEach Loop

The forEach method allows you to iterate over table cells in a more functional and concise way. forEach iterates over the selected table cells, providing a cleaner syntax for logging cell content.

HTML

<!DOCTYPE html>
<html lang="en">
<body>
	<table id="myTable" border="1">
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
		</tr>
		<tr>
			<td>Row 1, Cell 1</td>
			<td>Row 1, Cell 2</td>
		</tr>
		<tr>
			<td>Row 2, Cell 1</td>
			<td>Row 2, Cell 2</td>
		</tr>
	</table>
	<button onclick="loopThroughCells()">Loop Through Table Cells</button>
	<script>
		function loopThroughCells() {
			let cells = document.querySelectorAll('td');  
			cells.forEach(cell => {
				cell.style.backgroundColor = "green"; 
			});
		}
	</script>
</body>
</html>

3. Using Array.from()

Array.from() allows you to convert the rows or cells collection into an array, making it easy to use array methods like forEach to iterate over the cells. This method simplifies the iteration process by turning the HTMLCollection into a standard array.

HTML

<!DOCTYPE html>
<html lang="en">
<body>
	<table id="myTable" border="1">
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
		</tr>
		<tr>
			<td>Row 1, Cell 1</td>
			<td>Row 1, Cell 2</td>
		</tr>
		<tr>
			<td>Row 2, Cell 1</td>
			<td>Row 2, Cell 2</td>
		</tr>
	</table>
	<button onclick="loopThroughTableRows()">Loop Through Table Rows and Cells</button>
	<script>
		function loopThroughTableRows() {
			let table = document.getElementById("myTable");
			Array.from(table.rows).forEach(row => {
				Array.from(row.cells).forEach(cell => {
					cell.style.backgroundColor = "red";  
				});
			});
		}
	</script>
</body>
</html>

Conclusion

To loop through table cells in JavaScript, you can use the traditional for loop for full control, forEach for a more concise and functional approach, or Array.from() to convert collections into arrays for easier manipulation. Each method offers flexibility based on your needs.

How to create table cell using HTML5 ?

anujpaz9pe

Improve

Article Tags :

JavaScript - Loop Through Table Cells using JS

1. Using the for Loop

2. Using forEach Loop

3. Using Array.from()

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?