Я работаю над формой и пустой таблицей. Вы заполняете входные данные в форме, затем нажимаете кнопку, и данные сохраняются в массиве со значениями каждого входа, затем отображаются в новой строке таблицы с HTML и JavaScript с функцией insertRow()
. Я создал вторую функцию, чтобы получить индекс выбранной строки, чтобы показать строку данных в соответствующем входе для последующего обновления в случае необходимости. Моя проблема: я получаю строку индекса, но строка данных не отображается в соответствующем вводе.
Html -Form:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Peso del pollo (Gramos)</span>
</div>
<input type="number" id="pollogrs" name="pollogrs" class="form-control" aria-describedby="basic-addon1" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Pierna Muslo Derecha</span>
</div>
<input type="number" id="PMusloDer" name="PMusloDer" class="form-control" aria-describedby="basic-addon1" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Pierna Muslo Izquierda</span>
</div>
<input type="number" id="PMusloIzq" name="PMusloIzq" class="form-control" aria-describedby="basic-addon1" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Pechuga</span>
</div>
<input type="number" id="Pechuga" name="Pechuga" class="form-control" aria-describedby="basic-addon1" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Ala Derecha</span>
</div>
<input type="number" id="AlaDer" name="AlaDer" class="form-control" aria-describedby="basic-addon1" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Ala Izquierda</span>
</div>
<input type="number" id="AlaIzq" name="AlaIzq" class="form-control" aria-describedby="basic-addon1" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Espalda Superior</span>
</div>
<input type="number" id="EspSup" name="EspSup" class="form-control" aria-describedby="basic-addon1" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Espada Inferior</span>
</div>
<input type="number" id="EspInf" name="EspInf" class="form-control" aria-describedby="basic-addon1" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Cabeza</span>
</div>
<input type="number" id="Cabeza" name="Cabeza" class="form-control" aria-describedby="basic-addon1" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Cola</span>
</div>
<input type="number" id="Cola" name="Cola" class="form-control" aria-describedby="basic-addon1" required>
</div>
<button onclick="añadirRow();" class="btn aqua-gradient" style="align-items: center;">Cargar</button>
<button onclick="EditarFila();" class="btn aqua-gradient" style="align-items: center;">Editar</button>
HTML - Таблица:
<div class="container" style="padding:15px;">
<table id="" class="table table-striped table-bordered table-lg " cellspacing="0" width="100%">
<thead class="thead-dark">
<tr>
<th>Pollo Grs</th>
<th>Pierna Muslo Der.</th>
<th>Pierna Muslo Izq.</th>
<th>Pechuga</th>
<th>Ala Der.</th>
<th>Ala Izq.</th>
<th>Espalda Sup.</th>
<th>Espalda Inf.</th>
<th>Cabeza</th>
<th>Cola</th>
</tr>
</thead>
<tbody id="tabla_pollos">
</tbody>
</table>
</div>
Javascript:
<script>
var indicefilas,
tabla = document.getElementById("tabla_pollos");
function GetFila(){
const arrayinputsdata = [
document.getElementById("pollogrs").value,
document.getElementById("PMusloDer").value,
document.getElementById("PMusloIzq").value,
document.getElementById("Pechuga").value,
document.getElementById("AlaDer").value,
document.getElementById("AlaIzq").value,
document.getElementById("EspSup").value,
document.getElementById("EspInf").value,
document.getElementById("Cabeza").value,
document.getElementById("Cola").value];
for (var i = 1; i < tabla.rows.length; i++) {
tabla.rows[i].onclick = function() {
indicefilas = this.rowIndex;
for (let j = 1; j < tabla.rows[indicefilas].cells.length; j++) {
arrayinputsdata[j] = this.cells[j].innerHTML;// I think my mistake is here
}
console.log(indicefilas);
};
}
}
GetFila();
</script>