Así que tengo un fragmento de código para crear una tabla con algunos datos. La primera columna contiene casillas de verificación, otras columnas son solo datos regulares.
Lo que quiero es que cuando haga clic en cualquier lugar de una fila aleatoria (excepto en el encabezado), el fondo de toda la fila se vuelva amarillo (inicialmente blanco) y la casilla de verificación de esa fila esté marcada. Si vuelvo a hacer clic, todo en la fila vuelve a su estado normal (fila blanca y casilla de verificación sin marcar).
Cuando hago clic derecho en la casilla de verificación, todo actúa como se esperaba. Sin embargo, cuando hago clic en otro lugar, solo cambia el fondo. He marcado el atributo checked de la casilla de verificación y se cambia cada vez que hago clic (que es normal). No sé por qué sucede esto. He revisado muchas publicaciones con problemas similares, pero no se ha ayudado. Solo soy un principiante en Javascript y HTML. Por favor, ayúdame con esto. ¡Muchos gracias!
function changeColorRow(number) { var elem = document.getElementsByTagName("tr")[number] var curr_check = document.getElementsByClassName("checkbox").checked if (!curr_check) { elem.style.backgroundColor = "yellow" document.getElementsByClassName("checkbox").checked = true } else { elem.style.backgroundColor = "white" document.getElementsByClassName("checkbox").checked = false } } <h1>List of companies</h1> <table id="company"> <tr> <th>Choose</th> <th>ID</th> <th>Company</th> <th>Website</th> </tr> <tr onclick="changeColorRow(1)"> <td><input type="checkbox" class="checkbox"></td> <td>1</td> <td>ECOPRO Co., Ltd</td> <td>http://www.ecoprovn.com</td> </tr> <tr onclick="changeColorRow(2)"> <td><input type="checkbox" class="checkbox"></td> <td>2</td> <td>WAVINA.COM</td> <td>http://www.wavina.com</td> </tr> </table>document.getElementsByClassName devuelve una estructura similar a una matriz. Debe usar el índice para obtener ese elemento en particular en ese índice.
document.getElementsByClassName("checkbox")Puede obtener el índice de la fila en la que se hizo clic como
index = number - 1 const allCheckbox = document.getElementsByClassName("checkbox"); function changeColorRow(number) { const index = number - 1; var elem = document.getElementsByTagName("tr")[number] var curr_check = document.getElementsByClassName("checkbox")[index].checked if (!curr_check) elem.style.backgroundColor = "yellow" else elem.style.backgroundColor = "white" allCheckbox[index].checked = !allCheckbox[index].checked } [...allCheckbox].forEach(cb => { cb.addEventListener("change", (e) => changeColorRow(parseInt(e.target.dataset.index))) }) tr { cursor: default; user-select: none; } <h1>List of companies</h1> <table id="company"> <tr> <th>Choose</th> <th>ID</th> <th>Company</th> <th>Website</th> </tr> <tr onclick="changeColorRow(1)"> <td><input type="checkbox" class="checkbox" data-index="1"></td> <td>1</td> <td>ECOPRO Co., Ltd</td> <td>http://www.ecoprovn.com</td> </tr> <tr onclick="changeColorRow(2)"> <td><input type="checkbox" class="checkbox" data-index="2"></td> <td>2</td> <td>WAVINA.COM</td> <td>http://www.wavina.com</td> </tr> </table>