Мне нужно сохранить входное значение HTML в переменной JavaScript и показать его в таблице - PullRequest
Новая
       14

Мне нужно сохранить входное значение HTML в переменной JavaScript и показать его в таблице

0 голосов
/ 12 января 2019

У меня есть следующая переменная в js: 

var targetInput = {
  name: "1",
  targetTemperature: "20",
  targetHumidity: "48",
  targetLight: "1000",
  targetSoil: "750"
}

У меня есть таблица в html, откуда я хочу обновить эту переменную: 

<tr>
   <th>Tube 1</th>
   <th>Temperature: <input id="temp" value="" type="number"></th>
   <th>Humidity: <input id="humi" value="" type="number"></th>
   <th>Light: <input id="light" value="" type="number"></th>
   <th>Soil: <input id="soil" value="" type="number"></th>
   <th><button onclick="newTarget()">Send</button></th>
</tr>

В моем javascript я пытался обновить переменную с помощью этой функции: 

function newTarget(){
  targetInput.targetTemperature = document.getElementById('temp').value
  targetInput.targetHumidity = document.getElementById('humi').value
  targetInput.targetLight = document.getElementById('light').value
  targetInput.targetSoil = document.getElementById('soil').value
  console.log(targetInput);
  addTableData();
}

console.log работает, отображаются новые значения. Но затем я пытаюсь показать данные в виде таблицы в другом HTML-файле: 

<table class="table" id="target">
    <tr>
      <th>Tube number</th>
      <th id="number"></th>
    </tr>
    <tr>
      <th>Target temperature</th>
      <th id="temperatureTable"></th>
    </tr>
    <tr>
      <th>Target humidity</th>
      <th id="humidityTable"></th>
    </tr>
    <tr>
      <th>Target soil moisture</th>
      <th id="soilTable"></th>
    </tr>
    <tr>
      <th>Target light</th>
      <th id="lightTable"></th>
    </tr>
  </table>

Я показываю данные из первой переменной с этим кодом: 

function addTableData(){
  document.getElementById("number").innerHTML = targetInput.name;
  document.getElementById("temperatureTable").innerHTML = targetInput.targetTemperature;
  document.getElementById("humidityTable").innerHTML = targetInput.targetHumidity;
  document.getElementById("lightTable").innerHTML = targetInput.targetLight;
  document.getElementById("soilTable").innerHTML = targetInput.targetSoil;
  console.log("table data added");
}

Я вызываю эту функцию в конце моей функции newTarget, когда добавляются новые данные. Однако таблица все еще показывает старые данные, а не то, что я только что добавил. Как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 12 января 2019

Вы можете изменить имена клавиш в targetInput, чтобы они соответствовали идентификаторам input. Затем, когда кнопка нажата, вы можете перебирать каждый тег input и обновлять входное значение с targetInput, используя идентификатор: 

function newTarget(){
  var targetInput = {
    name: "1",
    temp: "20",
    humi: "48",
    light: "1000",
    soil: "750"
 }
  $('input').each(function(){
    $(this).val(targetInput[$(this).prop('id')]);
  });
}
0 голосов
/ 12 января 2019

вы можете использовать другой метод для решения вашей проблемы (отредактируйте целевой ввод и заново создайте таблицу)

способ 1: 

<table class="table" id="target">
     <thead>
       <tr>
          <th>Tube number</th> <%--  Add the other Columns here --%>
       </tr>
     </thead>
</table>
<script>
    function setTableValues ()
    {
        var Tbody = '<tr>'+
         ' <tbody>'+
          '<th>'+targetInput.name+'</th>'+/// add the other columns
       '</tbody>'; 
        document.getElementById("target").innerHTML = Tbody;   
    }
</script>

метод 2:

вы можете использовать DataTable JQuery или Bootstrap .... как это: 

<table class="table" id="target">

</table>
<script>
    var targetInputs = [{name: "1",
      targetTemperature: "20",
      targetHumidity: "48",
      targetLight: "1000",
      targetSoil: "750"
    }]; /// you add other target

     $('#target').DataTable({
                    data: targetInputs ,
                    "columns": [
                            { "title": "Tube number", "data": "name" },
                            { "title": "Target temperature", "data": "targetTemperature"},
                            { "title": "Target humidity", "data": "targetHumidity" },
                            { "title": "Target soil moisture", "data": "targetLight" },
                            { "title": "Target light", "data": "targetSoil" }
                    ],

                });
</script>
...