Open In App

JavaScript - Loop Through Table Cells using JS

Last Updated : 02 Dec, 2024
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

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.


Next Article
How to Access element from Table using JavaScript ?

A
anujpaz9pe
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox