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>