我正在使用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;
}
谢谢!