0

3 つの列を持つテーブルがあり、2 つのセルには 10 ～ 20 の値のリストを含む選択ボックスが含まれています。このようなもの：

| USER    | MANAGER            | DEPARTMENT   |

| Rob     | [John Smith |V]    | [Sales |V]   | 

| Sue     | [Bob Jones |V]     | [Support |V] |

このページは JSP であるため、for ループを使用して選択ボックスの内容を作成しています。すべての「マネージャー」およびすべての「部門」リストには、同じアイテムが含まれています。

「新しい行を追加」リンクもあります。次のように、Javascript を使用してテーブルに新しい行を追加する方法を知っています。

var table = document.getElementById("myTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

次のように、正しい「html」を新しい行に追加する方法を知っています。

var cell0 = row.insertCell(0);
var element0 = document.createElement("span");
element0.innerHTML = 'Hello';
cell0.appendChild(element0);

... 等々。

私の問題は、テーブルの行に大量の HTML があることです (各選択ボックスに多くの値がある可能性があるため)。

この問題にアプローチする良い方法は何ですか? 新しい行を追加するにはどうすればよいですか?

どんな提案でも大歓迎です！

ありがとう、ロブ

アップデート

フォーム上のすべてのデータを受け入れ、それを Java リストに変換し、新しい項目を追加してから、テーブルの新しい値を使用してページにリダイレクトする「addNewRow」サーブレットを作成できることを思いつきました。それは簡単かもしれません。

唯一の問題は、「新規追加」をクリックするたびに Web ページがリロードされることです。

4

3 に答える 3

0

問題は行を作成するだけでなく、HTMLをクリーンアップして、選択オプションがすべてを乱雑にしないようにする必要があるようです-私が正しく理解している場合。

オプションをJavaScript配列に分割してみましたか？

これはJavaScriptだけで実行できますが、データバインディングを提供するJavaScriptライブラリ（KnockoutJS、AngularJS、Emberなど）を使用している場合は、これを非常に簡単に実行できます。さらに、他の関心の分離の問題にも役立ちます。

それらのほとんどにはテンプレートソリューションも付属しています。これは、テーブルの作成に関しては間違いなく役立ちます。

Knockoutには、次のforeach行を生成するために使用できるバインディングがあります。

<tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>

例へのリンクは次のとおりです：http： //knockoutjs.com/documentation/foreach-binding.html

これまでに試したことがない場合は、JSFiddleで選択ボックスをKnockoutJSにバインドする非常に簡単な例を作成しました：http： //jsfiddle.net/phillipkregg/eQF3e/

値がサーバーに保存されている場合に備えて、値をプルダウンして、JQueryajax呼び出しを使用して配列に保存することができます-次のようになります。

$.getJSON('/my_items', function(data) {
   viewModel.items(data);
});

Knockoutに興味がある場合は、行と選択ボックスを使用してはるかに複雑な処理を行う方法を示す、彼らのサイトの別の例を次に示します。http: //knockoutjs.com/examples/cartEditor.html

サイト全体をチェックする価値があるかもしれません-ドキュメントは素晴らしいです。

お役に立てば幸いです。

于 2012-06-18T19:58:44.137 に答える
0

テンプレートソリューションを検討することができます-私はMustache.jsの大ファンです。これにより、HTMLを1つの別個のファイルに記述し、オブジェクトリテラルをテンプレートエンジンに渡して、すべてのテーブル行をループでレンダリングすることができます。

あなたはそのようなテンプレートを持つことができます（それを作るだけです）：

{{#person}}
<td>
    <h2 class="jobTitle">{{jobTitle}}</h2>
    <span>{{name}}</span> - {{age}}
</td>
{{/person}}

personそれぞれにプロパティを持つオブジェクトjobTitleのnameオブジェクトリテラルを渡すとage、残りは自動的に実行されます。

于 2012-06-18T19:30:40.773 に答える
0

既存の行の1つを複製して、必要な項目を編集するだけで済みます。

于 2012-06-18T19:35:02.130 に答える