es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo hacer que aparezca un Select Input al hacer clic

14 Jun, 2023 Programación

No sé si me expresé correctamente en el título, pero tengo la siguiente duda.

La idea es una tabla con solicitudes de usuarios. La tabla tiene texto estático. Cuando el usuario hace clic en el botón “Editar”, los campos en la fila en la que hizo clic se convierten en entradas selectas. Cuando el usuario selecciona el valor de entrada que necesita, hace clic en “Guardar” y los campos vuelven a ser estáticos con el valor seleccionado. Sé cómo guardar el valor de las entradas selectas, pero no sé cómo hacer que aparezca la entrada selecta cuando el usuario hace clic en “Editar”.

Este es el código que convierte el valor que el usuario eligió en una entrada selecta a una cadena:

let teste2 = document.getElementsByClassName(‘selectTotal’)[0]
let teste3 = document.getElementsByTagName(‘td’)[2]
let teste1 = document.getElementsByClassName(‘selectTotal’)[0].value
let teste1tam = document.getElementsByClassName(‘selectTotal’).length
let m = document.getElementsByClassName(‘editar’)
let mar = document.getElementsByClassName(‘editar’).length
for(i = 0; i<mar; i++){=”” m[i].addeventlistener(“click”,=”” function(event){=”” if(document.getelementsbyclassname(‘selecttotal’)[0].value=”=” ‘liberação=”” de=”” acesso’){=”” teste2.value=’Liberação de Acesso’ teste3.innerhtml=’Liberação de Acesso’ }=”” else=”” if=”” (document.getelementsbyclassname(‘selecttotal’)[0].value=”=” ‘sistema=”” lento’){=”” teste2.value=’Sistema Lento’ teste3.innerhtml=’Sistema Lento’ }=”” else=”” if=”” (document.getelementsbyclassname(‘selecttotal’)[0].value=”=” ‘problema’){=”” teste2.value=’Problema’ teste3.innerhtml=’Problema’ }=”” })=”” }=”” esta=”” es=”” la=”” tabla=”” html:=””></mar;>

1 teste
teste
Aberto uuuuu


Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que los inputs de selección aparezcan cuando el usuario hace clic en el botón “Editar”, se puede utilizar JavaScript para agregar un event listener al botón. Cuando el botón es clickeado, se puede utilizar el DOM para manipular la fila de la tabla y reemplazar el texto estático por los inputs de selección.

    Aquí hay un ejemplo de código que demuestra esto:

    // Obtener todos los botones de edición
const editButtons = document.querySelectorAll('.editar');

// Recorrer todos los botones de edición y agregar un event listener
editButtons.forEach(editButton => {
  editButton.addEventListener('click', () => {
    // Obtener la fila de la tabla que contiene el botón que fue clickeado
    const row = editButton.closest('tr');

    // Obtener las celdas de la fila que deben ser editadas
    const secondCell = row.querySelector('.segundaCol');
    const fourthCell = row.querySelector('.quartaCol');

    // Reemplazar el texto en las celdas por los inputs de selección
    const selectHtml = `
      <label for="setorSelect"></label>
      <select name="urgencias" id="setorSelect" class="selectTotal">
        <option value="Liberação de Acesso">Liberação de Acesso</option>
        <option value="Sistema Lento">Sistema Lento</option>
        <option value="Problema">Problema</option>
      </select>
    `;
    secondCell.innerHTML = selectHtml;
    fourthCell.innerHTML = selectHtml;    
  });
});

    Este código agrega un event listener a todos los botones “Editar”. Cuando se hace clic en un botón, obtiene la fila de la tabla que contiene el botón y las celdas de la fila que necesitan ser editadas. Luego reemplaza el texto estático en las celdas por los inputs de selección.

    Se puede ajustar el código para que coincida con la estructura de la tabla HTML actualizando las clases y los IDs utilizados en los selectores de consulta.

Comments are closed.