How to add the same class for all the td using javaScript

Question

Hi everyone I am new to js. How to add the same class for all the td using javaScript

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>Tic Tac Toe</title>
  <link rel="stylesheet" href="style.css"/>
  <script src="script.js" defer></script>
</head>
<body>  
  <h1>Tic Tac Toe</h1>
  <table>
    <tr>
      <td id="c0"></td>
      <td id="c1"></td>
      <td id="c2"></td>
    </tr>
    <tr>
      <td id="c3"></td>
      <td id="c4"></td>
      <td id="c5"></td>
    </tr>
    <tr>
      <td id="c6"></td>
      <td id="c7"></td>
      <td id="c8"></td>
    </tr>
  </table>
</body>
</html>

I have tried it like this but i am getting this erorr Uncaught TypeError: all.setAttribute is not a function at script.js:9 js

const  all = document.querySelectorAll('td');
all.setAttribute('class', 'tds');

you need a loop. `all.forEach(...)` – Barmar Nov 12 '21 at 23:34 — Barmar, Nov 12 '21 at 23:34

score 0 · Accepted Answer · answered Nov 12 '21 at 23:34

You are using querySelectorAll here, So you will get array like elements of all HTML td element

You just have to loop over and add class to it

const all = document.querySelectorAll('td');
all.forEach((item, i) => {
  item.setAttribute('class', 'tds');
});

You can also use

item.classList.add("tds");

Note: For demo purpose, I've used added text in between td and some CSS.

const all = document.querySelectorAll('td');
all.forEach((item, i) => {
  item.setAttribute('class', 'tds');
});

.tds{
  background-color: lime;
}

<h1>Tic Tac Toe</h1>
<table>
  <tr>
    <td id="c0">c0</td>
    <td id="c1">c1</td>
    <td id="c2">c2</td>
  </tr>
  <tr>
    <td id="c3">c3</td>
    <td id="c4">c4</td>
    <td id="c5">c5</td>
  </tr>
  <tr>
    <td id="c6">c6</td>
    <td id="c7">c7</td>
    <td id="c8">c8</td>
  </tr>
</table>

score 0 · Answer 2 · answered Nov 12 '21 at 23:44

It's very easy using jquery, it can work with a single line of code as seen below

$("td").attr("class", "tds");

/*To show that it works, i added a css code to change the background color so you know it really added the class to the td*/

.tds{
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Tic Tac Toe</h1>
<table>
  <tr>
    <td id="c0">c0</td>
    <td id="c1">c1</td>
    <td id="c2">c2</td>
  </tr>
  <tr>
    <td id="c3">c3</td>
    <td id="c4">c4</td>
    <td id="c5">c5</td>
  </tr>
  <tr>
    <td id="c6">c6</td>
    <td id="c7">c7</td>
    <td id="c8">c8</td>
  </tr>
</table>

How to add the same class for all the td using javaScript

2 Answers2