0

こんにちは、php.In を使用して Web サイトを作成しています。予定を追加するためのフォームが 1 つあります。そのページで、ユーザーは予定の日付、開始時刻、終了時刻を入力できます。ただし、ユーザーが日付と時刻を追加したい場合は、追加することもできます。そのために私は次のコードを書いています。

   <div id="date">
   <table>
   <tr>
   <td>
   Date<br>
   <input type="text" id="dateid">
   </td>
   <td>startTime:<select><option value="00:00">00:00</option></select></td>
   <td>EndTime:<select><option value="00:00">00:00</option></select></td>
   <td><input type="button" value="Extra Time" onClick="addTime()"></td>
   </tr>
   </table>
    </div>

onlickイベントの場合、関数で作成しています。

   <script>
   function addTime() 
{
var timeDiv='<div id="extraTimeDiv"><table><tr><td>Date<br><input type="text" id="extradate"></td><td >Start Time</td><td><select id="addstart" name="addstart"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option> EndTime:</td><td ><select id="addend" name="addend"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option></select></td><td></td></tr></table></div>'

   var div = document.getElementById('date');
div.innerHTML = div.innerHTML + timeDiv;

  }
</scritp>

これは正常に機能しますが、以前に選択したデータよりも多くをクリックすると消去されます。余分な時間を追加するためにさらに押すと、データはそのままのはずです。この問題を解決する方法を教えてください。前もって感謝します。

4

4 に答える 4

2

ここでの問題は、innerHTML が値を記憶していないことです。状態を維持する必要がある場合は、innerHTML を使用して新しいコンテンツを追加しないでください。appendChild を使用する必要があります。

function addTime() {    
    var timeDiv='<table><tr><td>Date</td></tr></table>';
    var div = document.createElement("div");
    div.innerHTML = timeDiv;
    document.getElementById('date').appendChild(div);
}

jQueryというラベルを付けたので、次のように簡単です

function addTime() {    
    var timeDiv='<div><table><tr><td>Date</td></tr></table></div>';
    $("#date").append(timeDiv);
}

呼び出し続けるaddTimeと、同じ ID を持つ複数の要素が追加されます。ID を削除するか、ID にカウンターを追加することができます。

于 2013-10-03T12:28:47.447 に答える
1

ex に clone メソッドを使用できます。この例は、id が vtable であるテーブルに追加する tr です。

$(document).ready(function () {
    $("#more").click(function() {
      $(".vtable tr:last").clone().find("input, select").each(function(){}).end().appendTo(".vtable");
    });
});

more は、div を作成するためにクリックされたボタンの ID です。これはデモンストレーション用であることに注意してください

また、あなたの質問によると、以前のデータはbcozを消去しています.+を使用してコードにhtmlを挿入しています.appendまたはcloneメソッドを使用する必要があるため、常に最後にデータを追加します.また、別のIDを渡すこともできます.各 html が追加されます。

于 2013-10-03T12:23:28.507 に答える
0

変更してみる

div.innerHTML = div.innerHTML + timeDiv;

に

$('#date').append(timeDiv);

詳細については、次のリンクをチェックしてください

http://api.jquery.com/append/

于 2013-10-03T12:29:36.093 に答える