Question

我有一个用户可以填写的表单。

我想要做的是允许用户在需要时添加更多的场地。

所有的工作井预计只有一小部分我似乎无法绕过。我花了最近几天试图解决这个问题并且让我发疯了。

Javascript代码

<script>
var ed = 1;
function new_education()
{
    ed++;
    var div1 = document.createElement('div');
    div1.id = ed;
    var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deled('+ ed +')" > Delete Education ' + ed + ' </a>';
    document.getElementById('educationtr').innerHTML = '<th colspan="4" style="background-color:#b0c4de;">Education ' + ed + '</th>';
    div1.innerHTML = document.getElementById('educationtpl').innerHTML + delLink;
    document.getElementById('education').appendChild(div1);
}
function deled(eleId)
{
    d = document;
    var ele = d.getElementById(eleId);
  var parentEle = d.getElementById('education');
    parentEle.removeChild(ele);
    ed--;
}
</script>

HTML代码

<legend>Education</legend>
<div id="education">
<table border=3>
<tr><th colspan="4" style="background-color:#b0c4de;">Education 1</th></tr>
<tr><td><label>School Name</label><input  type="text" name="schoolname[]" maxlength="30" size="30"><br></td>
<td><label>Degree Type</label><input  type="text" name="degreetye[]" maxlength="30" size="30"><br></td>
<td><label>Degree Field</label><input  type="text" name="degreefield[]" maxlength="30" size="30"><br></td>
</tr></table>
</div>

<a class="btn btn-info" href="javascript:new_education()" > Add New Education </a>

<div id="educationtpl" style="display:none">
<table border=3>
<tr id="educationtr"></tr>
<tr><td><label>School Name</label><input  type="text" name="schoolname[]" maxlength="30" size="30"><br></td>
<td><label>Degree Type</label><input  type="text" name="degreetype[]" maxlength="30" size="30"><br></td>
<td><label>Degree Field</label><input  type="text" name="degreefield[]" maxlength="30" size="30"><br></td>
</tr></table>
</div>

jsfiddle示例无法正常工作http://jsfiddle.net/811yohpn/

工作示例：http://thenerdservice.com/addtest.php

我想要发生的是每个新增的表格都会得到一个新标题＆＃34; Education 2＆＃34;，＆＃34; Education 3＆＃34;等，但这不会发生。

当按下按钮以添加新表时，会发生tr数据显示正确的情况。

如果再次点击它会增加tr数据，但删除按钮会保留正确的。

如果您多次点击该按钮，则前tr数据将继续增加，但添加的tr数据的重新保留＆＃34;教育2＆＃34;

谢谢

Answer 1

我建议使用jQuery重写new_education函数（我试图保存大部分原始代码，但这并不是那么容易）用多个相同的ID修复此问题。

Updated fiddle

function new_education() {
    ed++;
    var newDiv = $('#education div:first').clone();
    newDiv.attr('id', ed);
    var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deled(' + ed + ')" > Delete Education ' + ed + ' </a>';
    newDiv.find('tr:first th').text('Education ' + ed);
    newDiv.append(delLink);
    $('#education').append(newDiv);
}

注意：我还更改了HTML，删除了不必要的额外表格并使用<div id="1"></div>包装第一个：

<legend>Education</legend>
<div id="education">
    <div id="1">
        <table border=3>
            <tr>
                <th colspan="4" style="background-color:#b0c4de;">Education 1</th>
            </tr>
            <tr>
                <td>
                    <label>School Name</label>
                    <input type="text" name="schoolname[]" maxlength="30" size="30"/>
                </td>
                <td>
                    <label>Degree Type</label>
                    <input type="text" name="degreetye[]" maxlength="30" size="30"/>
                </td>
                <td>
                    <label>Degree Field</label>
                    <input type="text" name="degreefield[]" maxlength="30" size="30"/>
                </td>
            </tr>
        </table>
    </div>
</div>
<br/>
<a class="js-addNew btn btn-info" href="javascript:new_education()"> Add New Education </a>

Javascript错误的tr信息创建动态表

1 个答案: