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>

代码运行良好，但问题是当我点击＆＃34;添加更多＆＃34;按钮动态添加的字段变空了！

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

有人或许可以告诉我，我怎么不能清除这些字段？

提前致谢。

Answer 1

使用innerHtml时，即使您使用+=，也始终用新定义的内容替换内容。这就是每次点击按钮后动态内容为空的原因。

我将为此问题提供2种解决方案。其中一个需要使用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/>之间执行 NOT 使用<tr>，它可以非常快速地制造混乱。请使用css（例如：margin-bottom: 15px;）

Answer 2

innerHTML无法获取键盘输入的值。你可以使用appendChiled。在这种情况下，您应该使用createElement语句创建元素。使用jquery更容易。请尝试以下代码

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
var countBox =2;
function addExp()
{
document.getElementById("countexp").value= countBox;

$("#exp").append("<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>

</head>
<body>

<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>

</body>
</html>

Answer 3

根据这个问题的答案，我同意了。但！如果您对JavaScript非常了解，我们可以对所需/预期结果进行必要的处理，也可以根据预期/所需结果制作自己的东西。

function getInputValues(container){
    if(!(container instanceof Node) || !(container instanceof HTMLElement)){
        container = document.querySelector(container);
    }
    let values = {};
    container.querySelectorAll("INPUT").forEach((el)=>{
        values[el.name] = el.value;
    });
    
    return values;
}

function setInputValues(container, values){
    if(!(container instanceof Node) || !(container instanceof HTMLElement)){
        container = document.querySelector(container);
    }
    Object.keys(values).forEach((key)=>{
        container.querySelector("INPUT[name='"+key+"']").value = values[key];    
    });
}

在document.getElementById("exp").innerHTML +=之前，必须获取值，在添加/更新的html之后，必须为相同的输入设置值，如果要将输入名称用作数组，则可以设置索引值也可以通过getInputValues函数将输入属性从名称更改为id或任何其他唯一属性，以使所有内容都能正常运行。

我为自己的项目编写了此代码，如果需要，您也可以自行编写，否则对您有帮助

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

3 个答案: