¿Cómo puedo inspeccionar si se verifica un elemento dentro de una célula?

Question

La función  insert()  hace células de mesa que contienen nombres de tareas dados por entrada. Cada nombre de tarea tiene una casilla anexada y ¿cómo puedo inspeccionar si se verifica un elemento en una celda para que pueda cambiar sus propiedades? Quiero que la función  completeTasks()  compruebe un elemento comprobado así que cuando presione el botón que llama la función, los elementos que se verifican deben ser verdes y strikethrough(line-through). Task Name: Insert Complete Tasks Delete Tasks var i=0; var r=0; var arrName = []; function insert() { var chk = document.createElement( input ); chk.setAttribute( type ,  checkbox ); arrName[i] = document.getElementById( name ).value; var table = document.getElementById( tabl3 ); var row = table.insertRow(0); var cell1 = row.insertCell(0); r++;// counting the rows so i can delete them all later if i want to cell1.innerHTML = arrName[i]; cell1.appendChild(chk); // appending a checkbox to the element so i can check it later i++; } function completeTasks(){ // if one or more elements are checked when clicking this button // then the checked task name(s) would have green color and have a line-through text decoration. //.style.color =  green ; //.style.textDecoration =  line-through ; } function deleteTasks(){ // will probably have to delete all the cells so i did it like this for(let c = 0; c

scriptsculptor52b5 · Accepted Answer

Usted puede apuntar primero toda la casilla de verificación revisada usando Document.querySelectorAll(), luego bucle a través de ellos y establecer el estilo a lo más cercano td elemento. Demo: Task Name: Insert Complete Tasks Delete Tasks var i=0; var r=0; var arrName = []; function insert() { var chk = document.createElement( input ); chk.setAttribute( type ,  checkbox ); arrName[i] = document.getElementById( name ).value; var table = document.getElementById( tabl3 ); var row = table.insertRow(0); var cell1 = row.insertCell(0); r++;// counting the rows so i can delete them all later if i want to cell1.innerHTML = arrName[i]; cell1.appendChild(chk); // appending a checkbox to the element so i can check it later i++; } function completeTasks(){ var checkedEl = document.querySelectorAll('#tabl3 input:checked'); // get all the checked checkbox inside the table checkedEl.forEach(function(el){ //loop through them el.closest('td').style.color =  green ; el.closest('td').style.textDecoration =  line-through ; }); } function deleteTasks(){ // will probably have to delete all the cells so i did it like this for(let c = 0; c

Gpt · Answer

Para lograr que los elementos verificados en la tabla tengan un color verde y un estilo "line-through" cuando se hace clic en el botón "Complete Tasks", necesitas agregar un poco más de lógica a la función completeTasks().

Aquí tienes una solución:

javascript
function completeTasks() {
    var table = document.getElementById("tabl3");
    var rows = table.getElementsByTagName("tr");

    for (var i = 0; i < rows.length; i++) {
        var checkbox = rows[i].getElementsByTagName("input")[0]; // El checkbox está en la primera celda de cada fila
        var taskName = rows[i].getElementsByTagName("td")[0]; // La celda con el nombre de la tarea

        if (checkbox.checked) {
            taskName.style.color = "green";
            taskName.style.textDecoration = "line-through";
        } else {
            taskName.style.color = "black"; // Restablecer el color original si no está marcado
            taskName.style.textDecoration = "none"; // Restablecer el estilo si no está marcado
        }
    }
}

En esta función, primero obtenemos todas las filas de la tabla, luego verificamos si el checkbox está marcado en cada fila. Si está marcado, le aplicamos el estilo de color verde y "line-through" al nombre de la tarea en esa fila. Si no está marcado, se restablecen los estilos a los valores predeterminados.

Recuerda que debes modificar el acceso a los elementos de la fila según la estructura de tu tabla HTML. Asegúrate de que el acceso a los elementos coincida con la estructura de la tabla que estás creando en la función insert().

Respondida el Dec 17, 2020 a las 11:35 - por Gpt

Gemini · Answer

Para inspeccionar si un elemento dentro de una celda está marcado, puedes usar la propiedad "checked" del elemento de casilla de verificación. Aquí tienes cómo puedes modificar tu código para verificar los elementos marcados y cambiar sus propiedades de estilo:

javascript
function completeTasks() {
  // Obtener todas las celdas de la tabla
  var cells = document.getElementById("tabl3").getElementsByTagName("td");

  // Recorrer todas las celdas
  for (var i = 0; i < cells.length; i++) {
    // Obtener el elemento de casilla de verificación dentro de la celda
    var checkbox = cells[i].getElementsByTagName("input")[0];

    // Verificar si la casilla de verificación está marcada
    if (checkbox.checked) {
      // Si está marcada, cambiar las propiedades de estilo de la celda
      cells[i].style.color = "green";
      cells[i].style.textDecoration = "line-through";
    }
  }
}

De esta manera, cuando llames a la función "completeTasks()" se comprobará cada elemento marcado y se cambiarán las propiedades de estilo de las celdas correspondientes.

Respondida el Dec 17, 2020 a las 11:41 - por Gemini

¿Cómo puedo inspeccionar si se verifica un elemento dentro de una célula?

3 Respuestas: