2

  • 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 関数が入力用の新しいテキストボックスを追加します。この部分は正常に動作しています。問題は、2番目のテキストボックスを追加するためのボタンをクリックすると、jsがそれらを追加しますが、最初のテキストボックスに入力した値を削除します。追加ボタンをクリックしたときにデータを失いたくありません。それを解決する方法は？ありがとう

4

1 に答える 1

1

innerHTML次のjsコードを使用して変更すると、テキストボックス全体が新しいものに置き換えられるため、ユーザーがテキストボックスに既に入力したデータが失われます:

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

上記のステートメントにより、td の内容全体id="CardNumLabel"が新しい値に置き換えられます。挿入された新しい innerHTML では、テキスト ボックスの数が 1 つ増えていますが、ユーザーが以前にテキスト ボックスに入力したコンテンツを保持するための準備はありません。

以前に入力したデータの内容を保持するには:

  1. 直接変更する代わりに、appendChild()メソッドを使用するinnerHTML
  2. または、ユーザーが入力したデータをコピーして配列に格納するループを js で記述します。次に、同じinnerHTML方法を使用してテキスト ボックスの数を増やし、別のループを記述して、配列からテキスト ボックスにデータを戻します。

私が助けてくれることを願っています！

于 2014-05-01T05:50:56.813 に答える