我正在寻找一种方法来保存多个<input>表单字段中的表值，并能够恢复它们。为什么——我需要一种在英制和公制之间切换的方法，而不会在转换过程中失去精度。
所以我下面有一些代码，假设值是以英语单位系统输入的。如果用户随后切换到"公制"，则该用户为the values are converted。现在切换回英语没有任何作用，因为虽然我可以进行反向转换，但这样做最终会失去准确性。我不知道如何处理保存和恢复多个值的问题，我希望表单在用户切换到英语时使用restore originally entered values。我想我首先需要有一种方法来保存原始条目中的值。
尝试以下代码时，请先将所选内容从"英制"更改为"公制"。您将看到所有值都更改为某个转换值。再学英语也无济于事。"保存"answers"还原"按钮现在也不起任何作用。此外，由于我不知道如何对它们进行编码，因此各个值之间没有区别。除非迫不得已，否则我不想为每个单元格分配唯一的ID
我需要帮助的是：
- 如何处理个人价值观？我必须为它们生成并分配一个唯一的id吗
- 如何保存这些值——我可以在输入时隐式保存，也可以通过"保存"按钮显式保存
- 如何恢复值？当更改回原始单位制时，可以通过"恢复"按钮显式恢复值，也可以通过选择框隐式恢复值
编辑提及PHP:
"添加行"在这里只做编程，但它意味着可以添加更多的行。现在它是通过PHP完成的——向服务器后端发布一个表单post，并用额外的一行刷新页面。因此，如果需要的话，有一种方法可以使用PHP来生成一些HTML。如中所示，解决方案不必仅限于前端，但我认为PHP和前端的耦合越松散越好。因此，如果有一个仅前端（JS/jQuery）的解决方案，我会首先选择它，而不是JS/PHP混合方法，但我会接受两者。
$("#unit_system").change(function() {
if ($('#unit_system').val() == "Metric")
{
$(".input_gpm").val(convert($(".input_gpm").val(),'gpm','m3h'));
}
});
function convert(val, from, to)
{
var conv = [];
conv["m3h"] = 1 / 3600;
conv["gpm"] = 6.3090196485533854530026767050539e-5;
return val * conv[from] / conv[to];
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my_form">
<select id="unit_system">
<option value="English">English</option>
<option value="Metric">Metric</option>
</select>
<button id="save_values" type="button">Save Values</button>
<button id="restore_values" type="button">Restore Values</button>
<table id="values">
<tr>
<td>Row 1</td>
<td><input class="input_gpm" type="text" value="4" /></td>
<td><input class="input_gpm" type="text" value="4" /></td>
</tr>
<tr>
<td>Row 2</td>
<td><input class="input_gpm" type="text" value="4" /></td>
<td><input class="input_gpm" type="text" value="4" /></td>
</tr>
<tr>
<td>Row 3</td>
<td><input class="input_gpm" type="text" value="4" /></td>
<td><input class="input_gpm" type="text" value="4" /></td>
</tr>
<tr>
<td colspan="3"><button>Add Row...</button></td>
</tr>
</table>
</form>您可以使用jQuery.data（）为页面上的每个输入存储和检索任意数据。我在下面创建了一个可运行的示例。看看我为代码底部的"Save"answers"Restore"按钮创建的处理程序。
编辑：我刚刚看到了对"添加行"按钮的要求，并为此添加了一个事件处理程序。
$("#unit_system").change(function() {
if ($('#unit_system').val() == "Metric") {
$(".input_gpm").val(convert($(".input_gpm").val(),'gpm','m3h'));
}
});
function convert(val, from, to) {
var conv = [];
conv["m3h"] = 1 / 3600;
conv["gpm"] = 6.3090196485533854530026767050539e-5;
return val * conv[from] / conv[to];
};
$("#save_values").on("click", function() {
$("input").each(function() {
$(this).data("restore", $(this).val());
});
});
$("#restore_values").on("click", function() {
$("input").each(function() {
$(this).val($(this).data("restore"));
});
});
$("#addNew").on("click", function() {
var lastDataRow = $("#values tr:nth-last-of-type(2)");
var newDataRow = lastDataRow.clone();
newDataRow.find("td:first").html("Row " + $("#values tr").length);
lastDataRow.after(newDataRow);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my_form">
<select id="unit_system">
<option value="English">English</option>
<option value="Metric">Metric</option>
</select>
<button id="save_values" type="button">Save Values</button>
<button id="restore_values" type="button">Restore Values</button>
<table id="values">
<tr>
<td>Row 1</td>
<td><input class="input_gpm" type="text" value="4" /></td>
<td><input class="input_gpm" type="text" value="4" /></td>
</tr>
<tr>
<td>Row 2</td>
<td><input class="input_gpm" type="text" value="4" /></td>
<td><input class="input_gpm" type="text" value="4" /></td>
</tr>
<tr>
<td>Row 3</td>
<td><input class="input_gpm" type="text" value="4" /></td>
<td><input class="input_gpm" type="text" value="4" /></td>
</tr>
<tr>
<td colspan="3"><button id="addNew">Add Row...</button></td>
</tr>
</table>
</form>不是所有问题的完整解决方案，只是一种如何在相应的数据属性中存储和恢复当前度量或英文值的方法。调整后的Fiddle:
$("#unit_system").change(function () {
if ($('#unit_system').val() == "Metric") {
$(".input_gpm").each(function () {
$(this).data("english",
$(this).val()).val(convert($(this).val(), 'gpm', 'm3h'))
});
} else
{
$(".input_gpm").each(function () {
$(this).data("metric",
$(this).val()).val($(this).data("english"));
});
}
});