1

Estoy intentando sacar 2 td de una tabla y pasalo a una variable (i y j) y luego otra variable con el getElementById.

Mirar el codigo:

Tengo un botón que al hacer clic me rellena 2 input con 2 celdas de una tabla. La pregunta es ¿cómo puedo crear un for para i y un for para j (.rows[i].cells[j]), para poder recogerlo y maandarlo al input con la funcion cambiarValor?

Intenté hacerlo 1x1 pero no puede. Creo que la única solución es un for dentro de otro o si alguien me puede sugerir una idea mejor.

Muchas Gracias de antemano

Código:

var td11 = document.getElementById("table").rows[1].cells[1];
console.log(td11.innerText);

var td12 = document.getElementById("table").rows[1].cells[2];
console.log(td12.innerText);

// cargar valor en input
function cambiarValor() {
  document.getElementById('ciudad').value = td11.innerText;
  document.getElementById("fecha").value = td12.innerText;
}
<table id="table">
  <tr class="tr0">
    <td></td>
    <td>Ciudades</td>
    <td>Fechas</td>
    <td>Comprar</td>
  </tr>
  <tr>
    <td>01</td>
    <td class="ciudad">Madrid</td>
    <td class="fecha" name="fecha">01/07/2022</td>
    <td>
      <ion-icon name="cart-outline" class="shopping" onclick="cambiarValor(), irmarcador('comprar')"> </ion-icon>
    </td>
  </tr>

  <tr>
    <td>02</td>
    <td class="ciudad">Malaga</td>
    <td class="fecha">04/07/22</td>
    <td>
      <ion-icon name="cart-outline" class="shopping" onclick="cambiarValor()"> </ion-icon>
    </td>
  </tr>
  <tr class="tr1">
    <td>03</td>
    <td class="ciudad">Valencia</td>
    <td class="fecha">05/07/22</td>
    <td>
      <ion-icon name="cart-outline" class="shopping" onclick="cambiarValor()"> </ion-icon>
    </td>
  </tr>
  <tr>
    <td>04</td>
    <td class="ciudad">Canarias</td>
    <td class="fecha">06/07/22</td>
    <td>
      <ion-icon name="cart-outline" class="shopping" onclick="cambiarValor()"> </ion-icon>
    </td>
  </tr>
  <tr class="tr1">
    <td>05</td>
    <td class="ciudad">Tenerife</td>
    <td class="fecha">07/07/22</td>
    <td>
      <ion-icon name="cart-outline" class="shopping" onclick="cambiarValor()"> </ion-icon>
    </td>
  </tr>
  <tr>
    <td>06</td>
    <td class="ciudad">Toldedo</td>
    <td class="fecha">09/07/22</td>
    <td>
      <ion-icon name="cart-outline" class="shopping" onclick="cambiarValor()"> </ion-icon>
    </td>
  </tr>
  <tr class="tr1">
    <td>07</td>
    <td class="ciudad">Granada</td>
    <td class="fecha">11/07/22</td>
    <td>
      <ion-icon name="cart-outline" class="shopping" onclick="cambiarValor()"> </ion-icon>
    </td>
  </tr>
  <tr>
    <td>08</td>
    <td class="ciudad">Palma</td>
    <td class="fecha">13/07/22</td>
    <td>
      <ion-icon name="cart-outline" class="shopping" onclick="cambiarValor()"> </ion-icon>
    </td>
  </tr>
  <tr class="tr1">
    <td>09</td>
    <td class="ciudad">Bilbao</td>
    <td class="fecha">15/07/22</td>
    <td>
      <ion-icon name="cart-outline" class="shopping" onclick="cambiarValor()"> </ion-icon>
    </td>
  </tr>
  <tr>
    <td>10</td>
    <td class="ciudad">Barcelona</td>
    <td class="fecha">18/07/22</td>
    <td>
      <ion-icon name="cart-outline" class="shopping" onclick="cambiarValor()"> </ion-icon>
    </td>
  </tr>
</table>

1 respuesta 1

2

No necesitas obtener cada botón y asignarle evento. Puedes "delegarlo" a la tabla, de forma que creas solo una función que se encargue de revisar dónde se hizo el clic.

Si se hizo en un botón, entonces accedes a la fila a la que pertenece y, desde ahí, obtienes la información de las celdas relacionadas. Revisa los comentarios para ver qué hace cada sentencia.

Importante: Eliminé el atributo onclick de cada botón, porque no es necesario, ni conveniente.

// Asignar evento a tabla
document.querySelector('#table').addEventListener('click', e => {
    // e es el evento
    // e.target es el elemento que lo disparó
    if(e.target.classList.contains('shopping')) {
        // El clic fue en un icono
        let shopping = e.target;
        // Desde el icono se puede obtener la fila con closest()
        let tr = e.target.closest('tr');
        // Ahora puedes acceder a cada celda
        let ciudad = tr.cells[1].innerText;
        let fecha = tr.cells[2].innerText;
        // Ahora puedes hacer lo que necesites con estos valores
        console.log(ciudad, fecha);
        // Aquí puedes cambiar el valor de los campos
    }
});
.shopping {
    cursor: pointer;
}
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<table id="table">
    <tr class="tr0">
        <td></td>
        <td>Ciudades</td>
        <td>Fechas</td>
        <td>Comprar</td>
    </tr>
    <tr>
        <td>01</td>
        <td class="ciudad">Madrid</td>
        <td class="fecha" name="fecha">01/07/2022</td>
        <td><ion-icon name="cart-outline" class="shopping"></ion-icon></td>
    </tr>
    
    <tr>
        <td>02</td>
        <td class="ciudad">Malaga</td>
        <td class="fecha">04/07/22</td>
        <td><ion-icon name="cart-outline" class="shopping"></ion-icon></td>
    </tr>
    <tr class="tr1">
        <td>03</td>
        <td class="ciudad">Valencia</td>
        <td class="fecha">05/07/22</td>
        <td><ion-icon name="cart-outline" class="shopping"></ion-icon></td>
    </tr>
    <tr>
        <td>04</td>
        <td class="ciudad">Canarias</td>
        <td class="fecha">06/07/22</td>
        <td><ion-icon name="cart-outline" class="shopping"></ion-icon></td>
    </tr>
    <tr class="tr1">
        <td>05</td>
        <td class="ciudad">Tenerife</td>
        <td class="fecha">07/07/22</td>
        <td><ion-icon name="cart-outline" class="shopping"></ion-icon></td>
    </tr>
    <tr>
        <td>06</td>
        <td class="ciudad">Toldedo</td>
        <td class="fecha">09/07/22</td>
        <td><ion-icon name="cart-outline" class="shopping"></ion-icon></td>
    </tr>
    <tr class="tr1">
        <td>07</td>
        <td class="ciudad">Granada</td>
        <td class="fecha">11/07/22</td>
        <td><ion-icon name="cart-outline" class="shopping"></ion-icon></td>
    </tr>
    <tr>
        <td>08</td>
        <td class="ciudad">Palma</td>
        <td class="fecha">13/07/22</td>
        <td><ion-icon name="cart-outline" class="shopping"></ion-icon></td>
    </tr>
    <tr class="tr1">
        <td>09</td>
        <td class="ciudad">Bilbao</td>
        <td class="fecha">15/07/22</td>
        <td><ion-icon name="cart-outline" class="shopping"></ion-icon></td>
    </tr>
    <tr>
        <td>10</td>
        <td class="ciudad">Barcelona</td>
        <td class="fecha">18/07/22</td>
        <td><ion-icon name="cart-outline" class="shopping"></ion-icon></td>
    </tr>
</table>

1
  • Muchísimas gracias, que facil lo haces XD, llevaba 2 días en esto Commented el 28 jun. 2022 a las 20:48

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.