자바 스크립트가있는 ASP의 동적 텍스트 상자

Question

버튼 클릭시 테이블에 텍스트 상자를 만들려고합니다. 버튼 클릭으로 자바 스크립트 코드를 작성했는데 작동합니다. 내 문제는 이전 행의 텍스트 상자에 입력 한 데이터가 다음 행의 텍스트 상자를 추가 할 때 지워진다는 것입니다. 코드 및 스크린 샷이 제공됩니다. 이 문제를 해결하는 데 도움을주십시오. 추가 버튼을 클릭에

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var count = table.rows.length - 1; 
    table.innerHTML += "<tr> <td>"+count+"</td> <td><input type='text' id='date" + count + "' size='20'></td> <td><input type='text' id='from" + count + "' size='20'></td> <td><input type='text' id='to" + count + "' size='20'></td> <td><input type='text' id='mode" + count + "' size='20'></td> </tr>"; 
} 

나는 데이터가

Answer 1

innerHTML이 시나리오를 이동하는 방법이 아니다] Sl.no1에 curresponding 잃게됩니다. Javascript에서 제공하는 insertRow 및 insertCell 메소드를 사용해야합니다. 훨씬 깔끔하고 유지 보수가 용이하며 읽기 쉽습니다. innerHTML은 요소의 내용을 덮어 씁니다. .innerHTML += "something"을 사용했다면 작동 할 수도 있지만, addRow이 호출 될 때마다 테이블을 구성 할 수 없습니다. 문자 그대로 HTML을 통해 새로운 행을 추가 할 것입니다.

https://developer.mozilla.org/en-US/docs/DOM/table.insertRow

https://developer.mozilla.org/en-US/docs/DOM/tableRow.insertCell

이 방법

, 당신은 완전히 테이블을 기능 addRow가 호출 될 때마다 구성 할 필요가 없습니다. insertRow을 사용하고 내부에 텍스트 상자가있는 새 텍스트를 추가 할 수 있습니다. 이전 행은 덮어 쓰거나 다시 작성하거나 전혀 엉망이되지 않습니다 (올바르게 수행하는 한). 링크에는 예제가 있지만 몇 분 안에 코드로 예제를 게시 할 것입니다.

업데이트 :

http://jsfiddle.net/MJ2md/

무슨 뜻인지 설명합니다. 그것은 가장 깨끗하지 않을 수도 있습니다, 나는 단지 그것을 빨리 쓰고 싶었습니다!