0

Estoy tratando de editar lo que es el nombre de cada uno de estos elementos en mi tabla con un input text pero no tengo una exacta idea de como hacerlo aqui les muestro a que me refiero y el codigo que pensaba implementar introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

En estas imagenes esta la idea que quiero hacer que es lo que esta en el input text ponerlo en las etiquetas td despues de picarle en modificar y aqui les muestro una parte del codigo html y js

 <tr>
        <td class="parrafo">Tiger Nixon</td>
        <td>System Architect</td>
        <td><button type="button" class="btn btn-light btn-editar" data-bs-toggle="modal" data-bs-target="#modifica"><i class="fas fa-pencil-alt"></i></button>
            <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#Modal2"><i class="fas fa-search"></i></button>
            <button type="button" class="btn btn-danger" onclick="AlertaEliminar(this);"><i class="fas fa-trash-alt"></i></button></td>
      </tr>
      <tr>
        <td class="parrafo">Garrett Winters</td>
        <td>Accountant</td>
        <td><button type="button" class="btn btn-light btn-editar" data-bs-toggle="modal" data-bs-target="#modifica"><i class="fas fa-pencil-alt"></i></button>
            <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#Modal2"><i class="fas fa-search"></i></button>
            <button type="button" class="btn btn-danger" onclick="AlertaEliminar(this);"><i class="fas fa-trash-alt"></i></button></td>
      </tr>

   <form> //Este es el codigo del modal donde esta el input text
                    <div class="form-group">
                    <input type="text" name="mod_nombre" id="mod_nombre"/>
                    </div>                               
              </form>
            </div>      
          </div>    
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="btn2">MODIFICAR</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CERRAR</button>
      </div>
    </div>

Y con esto envia la informacion al input text pero ahora ocupo que se mande de regreso al td pero de cada uno cuando le pique al boton de editar y luego a modificar

const buttons = document.querySelectorAll('.btn-editar');

buttons.forEach(b => {
b.addEventListener('click', function (e){
    const nombreJurado = this.parentNode.parentNode.firstElementChild.textContent;
    const inputText = document.getElementById('mod_nombre');
    inputText.value = nombreJurado;

    const btnModificar = document.getElementById('btn2');
    let parrafo = document.querySelectorAll(".parrafo");
        
    parrafo.forEach(() => {
        btnModificar.addEventListener('click', function (e){
            parrafo.innerHTML = inputText.value;
        });
    });
});

});

3
  • Para que no hagas tanto modales, puedes editar el texto directamente en tu tabla asignandole el atributo contenteditable = true, luego que se termine la edicion y se haga click en guardar por ejemplo, puede usar una consulta ajax que te mande los datos a tu servidor y los guardes, igual si quieres utilizar lo que cargas en tu modal, al momento de cerrarlo solo pasa la variable del contenido usando JavaScript y que se actualize el contenido con el contenido del modal en tu tabla
    – AugustoM
    Commented el 15 abr. 2022 a las 8:48
  • Eso quiero hacer cargar lo del modal y de hecho estoy usando un solo modal para cada uno pero no entiendo del todo como hacer para mandar la variable de cada texto cuando le de a modificar Commented el 16 abr. 2022 a las 8:04
  • solo tienes que agregar una funcion que se active en el evento de dar click al close del model, entonces esta funcion que extraiga el contenido del modal actual, podes usar JQuery para eso, pasando al elemento padre del model y usando find para identificar el elemento que tiene tu contenido, ese contenido pasarlo a una variable que haga lo mismo y actualize el contenido de tu fila, ahorita voy corriendo para hacerte una demo, espero la idea de te claridad de como hacerlo
    – AugustoM
    Commented el 16 abr. 2022 a las 11:31

1 respuesta 1

1

Vale, con esto solo te doy una idea de lo que pueda ser, y así lo puedes adaptar a tu código.

HTML y JS:

//Almaceno en sus variables respectivas de el td y el input
var td = document.querySelector(".parrafo")
var input= document.querySelector(".nombre")

//Función del botón Modificar
function cambiar(){
  //Con textContent hago que el text del td se pueda remplazar, y lo remplazo con el valor del input
  td.textContent = input.value
}
<table class="default">
  <tr>
    <th>Nombre</th>
    <th>Proyecto</th>
  </tr>
  <tr>
    <td class="parrafo">Ashton Cox</td>
    <td>Junior Technical Author</td>
  </tr>
  <tr>
    <td>Bradley Greer</td>
    <td>Software Engineer</td>
  </tr>
</table>
<br>
<input type="text" class="nombre">
<button type="button" onclick="cambiar();">MODIFICAR</button>

Lo que hago, es ponerle un onclick al botón modificar, para que llame a la función "cambiar", dicha función se encarga de cambiar el texto del td con el valor del input, espero te sirva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.