자바 동적 테이블을 만드는 잘못된 정보

Question

사용자가 작성할 수있는 양식이 있습니다.

내가 원할 수있는 것은 필요한 경우 사용자가 더 많은 열정을 추가 할 수 있도록 허용하는 것입니다.

모든 작품 우물은 내가 갈 수없는 작은 부분을 기대합니다. 나는 그것을 이해하려고 노력하고있는 지난 커플 날을 보내었다. 그리고 그 미쳤던 나를 몰게한다.

자바 스크립트 코드

<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

각각의 새 테이블 추가하면 새로운 제목 인 "Ed ucation 2 ","Education 3 "등이 있지만 그런 일은 일어나지 않습니다.

버튼을 눌러 새 테이블을 추가하면 tr 데이터가 올바르게 표시됩니다.

한번 더 누르시면 삭제 버튼이 인데도 tr 데이터가 증가합니다.

버튼을 여러 번 충돌하면 상단 그럴 데이터는 그러나 추가 TR 데이터의 reat을 증가시키는 것은

이

Answer 1

은 내가 제안하는 것은 new_education 기능을 재 작성하는 것입니다 주셔서 감사합니다 "교육 2"를 유지 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); 
} 

참고 : 또한 불필요한 테이블을 제거 <div id="1"></div>와 처음 배치, HTML 변경 :

<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>