本地存储以增加投入

时间:2019-03-10 20:31:33

标签: javascript html input local-storage phonegap

我正在使用Phonegap创建一个应用程序,该应用程序使用户可以写下自己在健身房进行的锻炼。我现在正在使用LocalStorage为每个新的<'table'>或<'tr'>保存数据,这些数据是在单击“ addTableExersice” /“ addTableRow”之后创建的,但是我只获得第一张表中第一行的结果。我该如何解决?

HTML:

<tr style="color:white">
        <td class="set">1</td>
        <td><input class="inputGoal" id="goal-1" type="number" placeholder="x"></input><div class="testGoal" id="testGoal-1"></div></td>
        <td><input class="inputAchieved" id="achieved-1" type="text" placeholder="kg * reps"></input><div class="testAchieved" id="testAchieved-1"></div> </td>
    </tr>

JS:

function addTableRow(id, set)
{
  var goalResult = document.getElementById('goal-1').value;
  localStorage.setItem("goal", goalResult);
  document.getElementById('testGoal-1').innerHTML = localStorage.getItem("goal");
  document.getElementById('testGoal-1').style.visibility = "visible";
  document.getElementById('goal-1').style.visibility = "hidden";
  //-----------------------------------------------------------
  var achievedResult = document.getElementById('achieved-1').value;
  localStorage.setItem("achieved", achievedResult);
  document.getElementById('testAchieved-1').innerHTML = localStorage.getItem("achieved");
  document.getElementById('testAchieved-1').style.visibility = "visible";
  document.getElementById('achieved-1').style.visibility = "hidden";
  //-----------------------------------------------------------
    document.getElementById('table-' + id).innerHTML += '<tr style="color:white"><td class="set">'+set+'</td><td><input class="inputGoal" id="goal-'+set+'" type="number" placeholder="x"></input><div class="testGoal" id="testGoal-'+set+'"></div></td><td><input class="inputAchieved" id="achieved-'+set+'" type="text" placeholder="kg * reps"></input><div class="testAchieved" id="testAchieved-'+set+'"></div> </td></tr>';
    document.getElementById('table-plus-set-' + id).onclick = function() { addTableRow(id, set + 1); };
}

CSS:

.set
{
 color:orange;
 position: relative;
}
.inputGoal
{
 text-align:center;
 position: relative;
}
.testGoal
{
  position: relative;
  text-align: center;
  visibility: hidden;
  border-bottom: 1px solid white;
}
.inputAchieved
{
  text-align: center;
  position: relative;
}
.testAchieved
{
  position: relative;
  visibility: hidden;
  border-bottom: 1px solid white;
  text-align: center;
}

谢谢!

0 个答案:

没有答案