Quiero tener una página web con una tabla larga llena de valores de entrada. Quiero marcar una casilla de verificación cuando se modifica un valor de entrada de fila individual. No he podido hacer funcionar la parte de JavaScript.
El siguiente es mi intento
<!DOCTYPE html> <html> <head> <style>table {border: 1px solid black;} </style> </head> <body> <div class="container"> <form action="" method='POST'> <table id="table" class="table"> <thead> <tr> <th data-type="number">No.</th> <th>First name</th> <th>Modified <br>"to be hidden"</th> </tr> </thead> <tr> <td><input name="no[]" value="1" oninput="mod(this)"></td> <td><input name="f[]" value="Andrea" oninput="mod(this)"></td> <td><input id="modcheck" type="checkbox" name="modify[]" value=""></td> </tr> <tr> <td><input name="no[]" value="2" oninput="mod(this)"></td> <td><input name="f[]" value="Peter" oninput="mod(this)"></td> <td><input id="modcheck" type="checkbox" name="modify[]" value=""></td> </tr> <tr> <td><input name="no[]" value="3" oninput="mod(this)"></td> <td><input name="f[]" value="Sarah" oninput="mod(this)"></td> <td><input id="modcheck" type="checkbox" name="modify[]" value=""></td> </tr> </table> </form> </div> <script> function mod(r) { var i = r.parentNode.parentNode.rowIndex; document.getElementById("modcheck").modifed(i).checked = true; } </script> </body> </html>Puede iterar sobre cada fila y oninput una función de entrada para marcar la casilla de verificación correspondiente cuando se modifica el cuadro de texto input .
let rows = document.querySelectorAll("tr"); rows.forEach(row=>{ row.querySelectorAll("input:not(#modcheck)").forEach(input=>{ input.oninput = (e)=>{ row.querySelector("#modcheck").checked = true; } }) }) <!DOCTYPE html> <html> <head> <style> table { border: 1px solid black; } </style> </head> <body> <div class="container"> <form action="" method='POST'> <table id="table" class="table"> <thead> <tr> <th data-type="number">No.</th> <th>First name</th> <th>Modified <br>"to be hidden"</th> </tr> </thead> <tr> <td><input name="no[]" value="1"></td> <td><input name="f[]" value="Andrea"></td> <td><input id="modcheck" type="checkbox" name="modify[]" value=""></td> </tr> <tr> <td><input name="no[]" value="2"></td> <td><input name="f[]" value="Peter"></td> <td><input id="modcheck" type="checkbox" name="modify[]" value=""></td> </tr> <tr> <td><input name="no[]" value="3"></td> <td><input name="f[]" value="Sarah"></td> <td><input id="modcheck" type="checkbox" name="modify[]" value=""></td> </tr> </table> </form> </div> </body> </html>