Как программно изменить текущие значения ввода с помощью Javascript - PullRequest
0 голосов
/ 26 февраля 2020

Я работаю над формой и пустой таблицей. Вы заполняете входные данные в форме, затем нажимаете кнопку, и данные сохраняются в массиве со значениями каждого входа, затем отображаются в новой строке таблицы с 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...