javascript - 如何在jsp中使用javascript动态添加文本框

Question

• MyJSP

  <td id="CardNumLabel" colspan="2" width="300px" align="left">
    <input readonly="readonly" type="text" name="Names1" id="cNames1" size="25"
      value="Cardnumber1" />
    <input type="text" name="Values1" id="cValues1" size="25" value="" maxlength="6"/
    <input type="hidden" name="Cardnumbersay" id="Cardnumbersay" value="1">
    <input type="button" value="+" onClick="addCardnumber();">
  </td>
  

• 我的 JavaScript

  function addCardnumber()
  {
      var cardsay;
      cardsay = parseInt(document.getElementById('Cardnumbersay').value);
      if(document.getElementById('cNames'+cardsay.toString()).value=="" || document.getElementById('cValues'+cardsay.toString()).value=="")
      {
          alert('NULL');
      }else{
          cardsay = cardsay+1;
          CardNumLabel.innerHTML = CardNumLabel.innerHTML+"<input type='text' readonly='readonly' name='Names"+say+"' id='cNames"+cardsay+"' size='25' value='Cardnumber"+cardsay+"' />"+"&nbsp;"+
          "<input type='text' name='Values"+say+"' id='cValues"+cardsay+"' size='25' maxlength='6'/><br>";
           document.getElementById('Cardnumbersay').value = cardsay;
      }
  }
  

大家好， 当我单击“+”按钮时，javascript 函数会添加新的文本框进行填充。这部分运行正常。问题是当我单击添加第二个文本框的按钮时，js 添加了它们但删除了我输入到第一个文本框的值。我不想在单击添加按钮时丢失数据。如何解决？ 谢谢

Answer 1

您正在丢失用户已在文本框中输入的数据，因为当您修改 innerHTML 时，整个文本框将被更新的文本框替换。使用以下 js 代码:

CardNumLabel.innerHTML = CardNumLabel.innerHTML+"<some_html_goes_here>";

由于上述声明，td 的全部内容具有 id="CardNumLabel"被更新的值取代。较新的 innerHTML 增加了一个文本框的数量，但没有规定保留用户先前在文本框中输入的内容。

要保留之前输入的数据内容:

1. 使用appendChild()方法而不是修改 innerHTML直接
2. 或者，在js中写一个循环，将用户输入的数据复制到一个数组中。然后使用相同的 innerHTML增加文本框数量然后编写另一个循环将数组中的数据放回文本框的方法

希望我有所帮助!