JavaScript가 내 입력 값을 지 웁니다.

Question

HTML을 사용하여 간단한 양식을 작성 중이며 사용자가 테이블에 여분의 행을 추가 할 수 있도록 JavaScript를 페이지에 추가했습니다. 이 테이블에는 입력 유형 = "텍스트"태그 및 선택 태그가 있습니다. 사용자가 단추를 클릭하여 행을 추가하면 JavaScript는 행을 추가하지만 입력을 지우고 태그를 선택합니다.

내 스크립트 내가 문제가 여기 모르겠어요

var x = x + 1; 
function another() 
{ 
    x = x + 1; 
    y = y + 1; 
    var bigTable = document.getElementById("bigTable"); 
    bigTable.innerHTML += ("<TR><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><SELECT   
    NAME=\"PO" + x + "\"><OPTION>Select</OPTION><OPTION>1234567890</OPTION></SELECT> 
    </TD><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><INPUT TYPE=\"Text\" NAME=\"SKU" + x 
    + "\"></TD><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><INPUT TYPE=\"Text\" 
    NAME=\"modelNum" + x + "\"></TD><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><INPUT 
    TYPE=\"Text\" NAME=\"itemNum" + x + "\"></TD><TD CLASS=\"bigTable2\" 
    ALIGN=\"Center\"><INPUT TYPE=\"Text\" NAME=\"qty" + x + "\" ID=\"qty"+x+"\" 
    onBlur=\"total();\"></TD></TR>"); 
} 

입니다. "+ ="문은 기본적으로 내 테이블을 = 문과 같이 재설정합니까?

편집 : 모든 코드를 표시하는 방법을 모르지만 표시되는 것은 내 코드가 아닙니다. 기본 테이블이 있고 JavaScript를 사용하면 + = 문을 사용하여 HTML을 추가합니다.

편집 : 내 테이블이됩니다 :

<TABLE ID="bigTable"> 
    <TR> 
    <TH>P.O. #</TH> 
    <TH>SKU #</TH> 
    <TH>Model #</TH> 
    <TH>Item #</TH> 
    <TH>Quantity</TH> 
    </TR> 
    <TR> 
    <TD CLASS="bigTable" ALIGN="Center"> 
    <SELECT NAME="PO1"> 
     <OPTION>Select</OPTION> 
     <OPTION>1234567890</OPTION> 
    </SELECT> 
    </TD> 
    <TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="SKU1"></TD> 
    <TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="modelNum1"></TD> 
    <TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="itemNum1"></TD> 
    <TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="qty1" ID="qty1" onBlur="total();"></TD> 
    </TR> 
</TABLE> 

내 자바 스크립트 태그 사이의 모든 복제합니다. 그리고 변수 x를 사용하여 입력 및 드롭 다운의 이름에있는 숫자를 업데이트합니다. 변수 Y는 계산 기능을 증가시키는 데 사용됩니다.

Answer 1

HTML 요소의 innerHTML을 편집하면 전체 DOM이 다시 파생됩니다. 입력 값은 입력 요소의 HTML에 실제로 저장되지 않으므로 지워집니다.

의 옵션은 행을 추가하려면 DOM 조작을 사용할 수 없을 것입니다 :

function another(){ 
    x = x + 1; 
    y = y + 1; 
    var bigTable = document.getElementById("bigTable"); 
    vat tr = document.createElement('tr'); 
    tr.innerHTML = ("<td class='bigTable2' align='Center'><select name='PO" + x + "'><option>select</option><option>1234567890</option></select></td>"+ 
     "<td class='bigTable2' align='Center'><input type='Text' name='SKU" + x + "'></td>"+ 
     "<td class='bigTable2' align='Center'><input type='Text' name='modelNum" + x + "'></td>"+ 
     "<td class='bigTable2' align='Center'><input type='Text' name='itemNum" + x + "'></td>"+ 
     "<td class='bigTable2' align='Center'><input type='Text' name='qty" + x + "' ID='qty" + x + "' onBlur='total();'></td>"); 

    bigTable.appendChild(tr); 
} 

공지 문자열은 더 이상 <tr> 태그를 포함하는 방법.
이 코드는 tr 요소를 만든 다음 해당 행을 추가 한 다음 해당 테이블 전체에 (구문 분석 된) tr을 테이블에 추가합니다.

는 (나 또한/소문자 속성 태그를 변경하고 더 쉽게 읽을 수 있도록 ' 모든 \" 교체)

Answer 2

분명히하기 위해, x += y이 x = x + y를 작성하는 것과 동일합니다. 여기서 일어나는 일은 당신이 가지고 있던 것보다 새로운 행을 HTML로 덮어 쓰는 것입니다. 이 값은 HTML에 저장되지 않으므로 입력 내용이 지워집니다 (입력 내용 중 하나를 입력하면 실제 HTML에서 "값"속성이 업데이트되지 않습니다).

그래서 기본적으로 처음에 추가 된 노드와 추가 된 노드로 HTML을 덮어 쓰게됩니다.

편집 : Cerbrus 솔루션으로 이동하십시오. 훨씬 더 청결한.

Answer 3

나는 동적 배열을 만들고 현재 테이블의 각 열에 값을 저장하는 동적 JavaScript 코드를 사용했다. 그런 다음 코드에서 새 행을 만들고 배열에 액세스하여 값을 다시 채 웁니다.