Modifying HTML table cells in JavaScript

Let some HTML table #table be given. Suppose we are faced with the task of doing something with each cell of the table, for example, writing the text '!' into each of them.

Let's discuss the nuances of solving such a problem.

As you know, an HTML table has a two-dimensional structure: there are rows, and there are cells in them. We can solve our problem as follows: loop through the rows and loop through the cells in each row and do the action we need with them. That is, the above solution scheme is similar to how we would create such a table, filling it with rows and cells.

However, in this case, two nested loops will be superfluous: you can simply get all td and loop through them, performing the desired operation. Let's do it:

let tds = document.querySelectorAll('#table td'); for (let td of tds) { td.textContent = '!'; }

Let some HTML table with numbers and a button be given. By clicking on the button, double the number in each cell of the table.