3

順序付けされていないリストを含む単純なHTMLページがあります。リストにさらに追加できる入力フィールドを作成して、送信後に保存することはできますか？追加したいのは、<li>タグ内のコンテンツと<li>タグ自体です。

ありがとう、

4

4 に答える 4

2

これが、あなたが達成したいと思うことのデモを含むjsfiddleです：http：//jsfiddle.net/mvJNq/25/

サーバー側のコード、データベースなどがどのように設定されているかによって異なるため、サーバーでこれをどのように行うべきかについては答えられないことに注意してください。ただし、HTMLとして表示するだけで、ユーザーが移動するときに保存しない場合は、[送信]ボタンはまったく必要ありません。必要なのは、[追加]機能だけです。

于 2012-07-27T14:34:01.013 に答える
1

確かに、それは可能です。

これは、アイテムを「保存」するときに複雑になります。ユーザーがページを離れて後で戻ってきた場合、そのデータは利用できますか？その場合は、mySQLなどのデータベースが必要になります。liタグも保存できますが、なぜですか？

<li>そのセッションで利用可能な情報が必要な場合は、JavaScript変数に格納し、変数をループさせて、それらを'sとして吐き出すことができます。

于 2012-07-27T14:23:37.510 に答える
1

はい、それは可能です-いいえ、それはきれいではありません。これがあなたがすることです：

  1. デフォルトのリストアイテム/入力を使用してベースフォームを作成します
  2. jQuery / JavaScriptを使用して、別のアイテムを追加するときにクリックするボタンにイベントハンドラーをバインドします（または、この手順をスキップして、デフォルトで別のアイテムを表示することもできます）
  3. イベントで（すべての入力ボックスにユーザーが入力したテキストがあることを確認するか、ステップ2のクリックイベントであるかを問わず）、jQuery.append（...）を使用して別のリストアイテムを追加します。
  4. リストアイテムの総数を追跡し、新しいリストアイテムを追加するたびにこのカウンターの値をインクリメントするための「カウンター」として使用される非表示の入力フィールドがあることを確認してください（注：このフィールドのコードをどのように設計するかに応じて、ParseInt（）メソッド）
  5. フォームの入力を受け取っているページは、最初に非表示フィールドを読み取って追加するアイテムの数を認識し、次にアイテムをループして（forまたはwhileループ）正しく追加する必要があります。

注：フォームの受信を処理するために使用しているサーバー側の言語がわからないため、手順5はかなり一般的で普遍的に実行可能なオプションです。

于 2012-07-27T14:28:58.370 に答える
0

送信する代わりに追加ボタンを使用したい場合： 

$('#addButton').click(function(){
    var savedContent = $('#input').val();
}

作成して挿入する<li>には、javascriptを使用して要素を作成し、それをulに追加します。複数のulがある場合は、インデックスを変更します。

var content = document.createElement('li');
content.innerText = savedContent;
document.getElementsByTagName('ul')[0].appendChild(content);
于 2012-07-27T14:39:25.630 に答える