JSFiddle

Question

我有一个要求在点击按钮时添加文本框。当我点击添加按钮时，将创建新文本框但是在文本框中先前输入的数据将被清除。我不想在单击添加按钮时清除文本框中的数据。我怎么解决这个问题？

HTML

<tr id="div"></tr>
<tr> 
 <td> 
  <button type="button" class="btn btn-lg btn-info" onclick="generateRow();">Add</button>
 </td>
</tr>

JS

function generateRow() {
   var d=document.getElementById("div");
   d.innerHTML+=" <input class='form-control' type='text' required autofocus name='year'/>  ";
}

Answer 1

你可以在javascript中使用这样的东西

function generateRow() {
    var child="<input class='form-control' type='text' required autofocus name='year'/>"; 
    document.getElementById("div").appendChild(child);
}

Answer 2

使用jquery .append()将div添加到现有内容

Answer 3

function generateRow() {
    var i=0,j=0;

    var d=document.getElementById("div"),input,value;
    //var m=document.getElementById("div");
    var x=new Array(50);
    while (i!=d.childNodes.length/2)
    {
    if (input = d.children[i]) {// If there's an input...
        x[i]=input.value; // ...get the value
    }


    //d.children[i].value = value;
    i++;
    }
    d.innerHTML += "<input class='form-control' type='text' required autofocus name='year'/> ";
  //  m.innerHTML += "<td><input  type='button' required autofocus name='year' value='Remove'/> </td>";

    while(j!=i)
        {
    d.children[j].value = x[j];
        j++;
        }
}

Answer 4

使用纯javascript试试这个

function generateRow() {
    var d=document.getElementById("div");
    var f = document.createElement("input");
    f.name="year";
    d.appendChild(f);
}

Answer 5

使用jQuery略有不同的答案。可能对未来的用户有用

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script  type="text/javascript">
        function generateRow() {
            $("#div").append("<input type='text' name='year'/><br/>");
        }
    </script>
</head>
<body>
    <table>
        <div id="div">
            <!-- Buttons Go Here -->
        </div>
        <button type="button" onclick="generateRow();">Add</button>
    </table>
</body>
</html>

单击“添加”按钮时，不要清除文本框

5 个答案:

JSFiddle