Estoy usando javascript para modificar el estilo de una página y funciona muy bien. Sin embargo, el siguiente paso es cambiar el estilo de la primera columna de una tabla. ¿Cómo puedo identificar y configurar el estilo de la primera columna solamente? Mis otros cambios hasta ahora se basan en la identificación o en una cantidad de elementos que tienen una clase. En este ejemplo, solo sé que son elementos TH o TD, y quiero cambiar los de la primera columna.
En caso de que alguien pregunte, este es mi código hasta ahora... está funcionando y no incluye nada que ver con la configuración del estilo de la primera columna.
function rotate_headers() { const collection = document.getElementsByTagName("th"); for (let i = 0; i < collection.length; i++) { collection[i].innerHTML = '<div style="padding-left: 100%;"><div style="transform: translate(7px, 3px) rotate(315deg); width: 30px;"><span style="border-bottom: 1px solid #ccc; padding: 5px 10px; color:grey;"' + collection[i].innerHTML + '</span> </div></div>'; // collection[i].style.background = "#6877c3"; // //collection[i].style.height = "100px"; // } const collection2 = document.getElementsByClassName("table-bordered"); for (let i = 0; i < collection2.length; i++) { collection2[i].style.border = "0px"; collection2[i].style.marginTop = "95px"; } const collection3 = document.getElementsByClassName("highlight"); for (let i = 0; i < collection3.length; i++) { collection3[i].classList.remove("highlight"); } const collection4 = document.getElementsByClassName("table-content"); for (let i = 0; i < collection4.length; i++) { collection4[i].style.padding = "1rem 1rem"; } const collection5 = document.getElementsByClassName("table-content"); for (let i = 0; i < collection5.length; i++) { collection5[i].style.width = "100px"; collection5[i].style.position = "relative"; collection5[i].style.whiteSpace = "nowrap"; collection5[i].style.overflowX = "scroll"; collection5[i].style.overflowY = "hidden"; } }El siguiente código hace lo que quiero, pero solo si mi tabla tiene una ID... que la mía normalmente no tiene.
var table = document.getElementById('test'); for (var i = 1; i < table.rows.length; i++) { var firstCol = table.rows[i].cells[0]; //first column firstCol.style.background = 'red'; // or anything you want to do with first col }El siguiente código no funciona... que es mi problema
var table = document.getElementsByTagName("table"); for (var i = 1; i < table.rows.length; i++) { var firstCol = table.rows[i].cells[0]; //first column firstCol.style.background = 'red'; // or anything you want to do with first col }Simplemente puede usar document.querySelectorAll('tr th:first-child, tr td:first-child') y luego iterar el resultado configurando los estilos que desea.
let firstCol = document.querySelectorAll('tr th:first-child, tr td:first-child') for (let i = 0; i < firstCol.length; i++) { firstCol[i].style.color = 'red' } <table> <tr> <th>one</th> <th>two</th> <th>three</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>Creo que encontrará la respuesta en el próximo artículo: https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics
Estilo sin Hay una última característica de la que le hablaremos en este artículo antes de continuar. HTML tiene un método para definir la información de estilo para una columna completa de datos en un solo lugar: los elementos y . Estos existen porque puede ser un poco molesto e ineficiente tener que especificar el estilo en las columnas; por lo general, debe especificar su información de estilo en cada o en la columna, o usar un selector complejo como :nth-child.