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

问题描述：

我希望能够做的是允许用户在需要时添加更多的场景。

所有工作井期望一小部分，我似乎无法绕过。我花了几天的时间试图找出它，并使我发疯。

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

我想什么发生是每个新表添加将得到一个新的标题“埃德教育2“，”教育3“等，但没有发生。

当点击按钮添加新表时，tr数据将显示正确。

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

如果你按下按钮多次顶部TR数据将继续但递增添加的TR数据的不动产资产保持“教育2”

谢谢

[改正问题小提琴]（http://jsfiddle.net/811yohpn/1/）。 – Regent 2014-10-09 05:49:13

再一次：元素ID **必须是唯一的。 – Regent 2014-10-09 05:51:21

答

我的建议是重写new_education功能使用jQuery（我试图保存大部分原始代码，但并不那么容易），解决了多个相同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信息创建动态表

相关推荐