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>