Question

我正在使用HTML编写一个简单的表单，并在页面中添加了JavaScript，以允许用户向表中添加额外的行。此表的输入类型为=＆＃34; Text＆＃34;标签和选择标签。当用户单击按钮添加行时，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>");
}

我不确定这里的问题是什么。是＆＃34; + =＆＃34;语句基本上重置我的表就像一个=语句会吗？

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

我的JavaScript复制标签之间的所有内容。我使用变量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中（当您在其中一个输入中输入时，它的“value”属性不会在实际HTML中更新。）

所以你基本上用最初添加的节点和一些添加的节点覆盖你的HTML。

编辑：去Cerbrus的解决方案。更干净。

Answer 3

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

JavaScript清除我的输入值

3 个答案: