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

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

我想发生的是，每个添加的新表都将获得一个新的标题“ Education 2”，“ Education 3”等，但是不会发生。

发生的事情是，当单击按钮添加新表时，tr数据将显示正确。

如果再次点击它，它将增加tr数据，但是删除按钮保持正确。

如果您再按一次该按钮，则最上面的tr数据将继续增加，但是添加的tr数据的保留状态为“教育2”

谢谢

Answer 1

我的建议是使用jQuery重写new_education函数（我尝试保存大部分原始代码，但并非如此简单），使用多个相同的ID修复了此问题。

更新小提琴 。

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>