2009-05-30 14 views
1

私はStruts2タグをフロントページ側のデザインページに使用しています。jspページに動的コンテンツを追加したい

私は3つの単純なフィールド&をいくつかの追加リンクに置いているという私のJSPページの要件を持っています。同じフォーム上の別の3つまたは4つのフィールドを動的にしたいです。

たとえば、ユーザーがリンクを追加するときに5時間をクリックした場合、3回または4回のフィールドがjspページに表示される必要がある5回。

私はajaxがこの目的に役立つことがわかっています。しかし、私はそれを達成する方法を混乱させています。いずれかのソリューションを持っている場合Plzを返信

...事前に

ありがとう....

答えて

1

あなたの最善のアプローチはJavaScriptを簡素化するためにjqueryを使用することです。このシンプルなhtmlページは、アプローチを示しています。

<html> 
    <head> 
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"/> 
    </head> 
    <body> 
    <form method="post" action="#"> 
     <table> 
     <tbody> 
      <tr> 
      <td><input type="text" name="fieldname"/></td> 
      <td><a href="#" onclick="$(this).closest('tr:not(:only-child)').remove();return false;">delete</a></td> 
      </tr> 
      <tr> 
      <td><input type="text" name="fieldname"/></td> 
      <td><a href="#" onclick="$(this).closest('tr:not(:only-child)').remove();return false;">delete</a></td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
      <td></td> 
      <td><a href="#" onclick="var tr = $(this).closest('table').find('tbody tr:first-child').clone(true); $(tr).find(':input').val(''); $(this).closest('table').find('tbody').append(tr); return false;">add</a> 
      </td> 
      </tr> 
     </tfoot>  
     </table> 
    </form> 
    </body> 
</html> 

これはアプローチのクイックルウンダウンです。各反復要素は、表の行の一部です。それに応じてjqueryを調整する他のタイプのコンテナを選択することもできます。繰り返し要素は各行にtbody内にあり、その行を削除する入力とリンクがあります。 tbodyの唯一の子でない場合にのみ行を削除することに注意してください。 addリンクから新しい要素を追加する方法が常に必要です。追加ロジックはtfootにあります。 addリンクは、対応するtbodyの最初のテーブル行を見つけ出し、クローンします。入力フィールドのすべての値をクリアし、tbodyに新しい行として追加します。

この例で行ったように、多くのjavascript/jqueryを属性に埋め込むのは良い方法ではありません。

関連する問題