Javascript 在表中动态添加字段而不更新表单

Question

JSFiddle 代码:http://jsfiddle.net/wxLa80od/

我有一个 html 页面，如下所示:

<form action="cvformphp.php" method="post">
<table id="cvtable">
<tr><td><h2>Personal Info</h2></td></tr>
<tr><td>Name* </td> <td><input type="text" name="name"></td></td>
<tr><td>Email* </td><td><input type="Email" name="email"></td></tr>
<tr><td><h2>Experiences</h2></td></tr>
<tr><td>Job role </td><td><input type="text" id="role1" name="role1"></td>     <td>Company name</td><td><input type="text" id="comp1" name="comp1"></td </tr>

<input type="text" hidden="hidden" value="1" id="countexp" name="countexp"/>
<tbody id="exp" name="exp"></tbody>

<tr><td></td><td><input  type="button" id="2" value="+ Add More"  onclick="addExp()"/></td></td></tr>
</table>
</form>

使用 JavaScript 代码

<script>
var countBox =2;
function addExp()
{
document.getElementById("countexp").value= countBox;

document.getElementById("exp").innerHTML +="<br/><tr><td>Job role</td><td>
<input type='text' id='role"+ countBox +"'  name='role"+ countBox+"'/></td>     
<td>Company name</td><td><input type='text' name='comp"+ countBox +"'   
id='comp"+countBox +"''/> </td></tr>";
       countBox += 1;
}

</script>

代码运行良好，但问题是当我单击“添加更多”按钮时，动态添加的字段变空!

我想填写表单中的所有数据，以便将它们传递到 php 文件。

有人可以告诉我如何无法清除这些字段吗？

提前致谢。

Answer 1

当使用innerHtml时，您始终将内容替换为新定义的内容，即使您使用 += 。这就是为什么每次单击按钮后动态内容都是空的。

我将为这个问题提供两种解决方案。其中一个需要使用 jQuery，另一个则不需要(但更复杂):

解决方案 1(使用 jQuery)

function addExp()
{
document.getElementById("countexp").value= countBox;

    $("#exp").append("<tr><td>Job role</td> \
        <td><input type='text' id='role"+ countBox +"'  \
        name='role"+ countBox+"'/></td><td>Company name</td>\
        <td><input type='text' name='comp"+ countBox +"' \
        id='comp"+countBox +"''/> </td></tr>");

    countBox += 1;
}

jsFiddle:http://jsfiddle.net/wxLa80od/4/

解决方案 2(不使用 jQuery)

function addExp()
{
    document.getElementById("countexp").value= countBox;

    var newChild = document.createElement("tr");
        document.getElementById("countexp").value= countBox;

    // Create an empty <tr> element and add it to the 1st position of the table:
    var row = document.getElementById("exp").insertRow(-1);

    // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);

    // Add some text to the new cells:
    cell1.innerHTML = "Job role";
    cell2.innerHTML = "<input type='text' id='role"+ countBox +"' name='role"+ countBox+"'/>";  
    cell3.innerHTML = "Company name"; 
    cell4.innerHTML = "<input type='text' name='comp"+ countBox +"'id='comp"+countBox +"''/>";



        countBox += 1;
}

jsFiddle:http://jsfiddle.net/wxLa80od/2/

还有一个快速说明:不要使用 <br/>在两行之间<tr> ，它很快就会造成困惑。请使用 css (例如: margin-bottom: 15px; )