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

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>

代码运行不错，但是 问题是当我单击 "Add more" 按钮时，动态添加的字段变空了！

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

有人能告诉我怎么不能清除字段吗？

提前致谢。

Answer 1

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 2

当使用 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/

还有一个简短的说明：不要在两行<tr>之间使用<br/>，它会很快造成混乱。请为此使用 css（例如：margin-bottom: 15px;）

Answer 3

根据这个问题的回答我同意了。但！我们可以为 required/expected 结果做一些必要的事情，如下所示，如果你对 JavaScript 很了解，我们也可以为 expected/required 结果做你自己的东西。

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 += 之前，您必须获取值，在 added/updated html 之后，您必须为相同的输入设置值，如果您想使用输入名称作为array 然后你也可以设置索引值，也可以将输入属性从 name 更改为 id 或 getInputValues 函数中的任何其他唯一属性，以使一切完美。

我为自己的项目编写了这段代码，如果需要，您也可以自己制作，否则它会对您有所帮助

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

Javascript adding fields dynamically in table without updating the form

html

javascript

php

forms

input