Question

我试图制作一个输入表单，在其中单击“添加”按钮后将显示输入元素。但是有时当我输入时，我常常忘记按下刷新按钮，而所有输入都丢失了，不得不重新开始，如果重新加载或刷新输入元素，怎么能不丢失呢？

<button type="button" onclick="itemAdd()" >Add</button>
<div id="entry"></div>

<script>
var line= 1;
function itemAdd()
{
    var parts = '<input type="text" name="description"><input type="text" name="amount"><input type="text" name="price">';
    $('#entry').append(parts);  
    line++;

}
</script>

Answer 1

您需要将添加的行保留在某处。选项包括后端，localStorage，Cookie等。这是一个localStorage演示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button" onclick="itemAdd()">Add</button>
<button type="button" onclick="removeItem()">Delete</button>
<div id="entry"></div>

<script>
var parts = '<div><input type="text" name="description"><input type="text" name="amount"><input type="text" name="price"></div>';
var line = localStorage.getItem("lineCount") || 1;
for (var i = 0; i < line; i++) {
  $('#entry').append(parts);
}
function itemAdd()
{
  $('#entry').append(parts);
  localStorage.setItem("lineCount", ++line);
}
function removeItem()
{
  $('#entry').children().last().remove();
  localStorage.setItem("lineCount", $('#entry').children().length);
}

</script>

当页面重新加载或刷新时，如何使jquery追加中的输入元素出现

1 个答案: