JavaScript清除我的输入值

我正在使用HTML编写一个简单的表单，并在页面中添加了JavaScript，以允许用户向表中添加额外的行。此表具有input type=“Text”标记和select标记。当用户单击按钮添加一行时，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>");
}

var x=x+1；
函数另一个（）
{ 
x=x+1；
y=y+1；
var bigTable=document.getElementById（“bigTable”）；
bigTable.innerHTML+=（“选择1234567890
");
}

我不确定这里有什么问题。“+=”语句基本上是像=语句那样重置我的表吗

编辑：我不知道如何让所有代码都显示出来，但显示的并不是我所有的代码。我有一个基本表，使用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>

邮局#
SKU#
模型#
项目#
量
挑选
1234567890

---

我的JavaScript复制了标签之间的所有内容。我使用变量x来更新输入和下拉列表名称中的数字。变量Y用于增加计算函数。

编辑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);
}

函数另一个（）{
x=x+1；
y=y+1；
var bigTable=document.getElementById（“bigTable”）；
vat tr=document.createElement（'tr'）；
tr.innerHTML=（“选择1234567890”+
""+
""+
""+
"");
追加儿童（tr）；
}

请注意字符串如何不再包含

标记。
此代码创建一个

tr

元素，然后将行添加到该元素中，然后将整个（已解析的）

tr

添加到表中

---

（我还将标记/属性更改为小写，并将所有

\“

替换为

'

，以使其更具可读性）

要清楚，

x+=y

与写入

x=x+y

是一样的。这里发生的事情是，您正在用您拥有的加上新行覆盖HTML。这会清除您的输入，因为它们的值没有存储在HTML中（当您在其中一个输入中键入时，它的“value”属性在实际HTML中不会更新）

因此，您基本上是用最初存在的内容加上一些添加的节点来覆盖HTML

---

编辑：选择Cerburs的解决方案。更干净。

我最终得到的是一个动态JavaScript代码，它将创建一个动态数组并在当前表的每一列中存储值。然后代码创建一个新行，然后访问数组以重新填充值。

表结构是什么？能否将其添加到po中st please？即使我的+=语句被更改为+=“
”我的
被插入并且我的输入被清除。

insertAfter

需要一个DOM元素，而不是HTML字符串。

元素。appendChild（newTR）

也可以。注意到了。几乎忘记了

appendChild

（已经使用该函数很长时间了）。我非常确定

x

和

y

甚至都不用于定位新创建行的行和单元格。它仅用于其属性，与覆盖旧行没有任何联系。这可以工作，并且不会删除值。谢谢！我将对此进行进一步修改。