Hola a todos soy nuevo en js. Cómo agregar la misma clase para todos los td usando 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>Lo he intentado así pero recibo este error Uncaught TypeError: all.setAttribute no es una función en script.js:9 js
const all = document.querySelectorAll('td'); all.setAttribute('class', 'tds');Está utilizando querySelectorAll aquí, por lo que obtendrá una matriz como elementos de todos los elementos HTML td
Solo tienes que recorrerlo y agregarle clase.
const all = document.querySelectorAll('td'); all.forEach((item, i) => { item.setAttribute('class', 'tds'); });También puedes usar
item.classList.add("tds"); Nota: Para propósitos de demostración, he usado texto agregado entre td y algo de 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>Es muy fácil usar jquery, puede funcionar con una sola línea de código como se ve a continuación
$("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>