0

概要： 動的なWeb請求システムを作成しています。ほとんどのページはテキストエリアであり、フォームの送信後にデータを別のテーブルに投稿するため、テーブルを使用してネストしました。「ネストされた」行の追加が選択されている場合、投稿時にforループに収集できるように、どの行とどの位置の詳細が記載されたフォームフィールドを含む行を内部に追加する必要があります。

画像： ここに画像の説明を入力してください

問題：

  1. 丸で囲んだ領域に行を追加しても、最後の行には追加されません。画像のように追加されます。さらに、最初のアイテムでのみ機能し、2番目の行の追加ではクリックも登録されません。
  2. この特定のインデックスサイズと親のインデックス番号（javascriptの2〜3行目にあります）でフォーム名[][]を作成するための変数を取得する方法がわかりません。

関連コード：

Javascript

$("#additemrow").click(function(){
  var currentListItem = $(this).length;
  var currentJobItem = $(this).parents('#items').index('#items');
  currentListItem++;
  $("#listitem:last").after(/*Blank Form Row*/);
  bind();
})

PHP

<table id="items">
  <tr class="item-row"><td>/*form elements*/</td></tr>
  <tr class="list-row">
   <td colspan=5>
    <table class="itemlist">
     <?php
     $itemCount = 0;
     foreach($jobListItem as $items) {
      foreach($items as $item) {
       if($problem['item_id'] == $item['item_id']) { 
    ?>
    <tr id="listitem">
     <td class="list-item">
       <div class="delete-wpr">
         <textarea class="item" name="item[/*A PARENT ITEM NUMBER*/][<?php echo $itemCount;?>][item]"></textarea>
         <a class="deleteitem" href="javascript:;" title="Remove row">X</a>
        </div>
       </td>
      </tr>
     <?php
      }
      $itemCount++;
     }
    }
     ?>
     <tr>
     <td colspan="5"><a id="additemrow" href="javascript:;" title="Add a row">Add a row</a></td>
     </tr>
    </table>
    //NEXT ITEMLIST GOES HERE
   </table>

編集：Foreachループは、配列から変数を取得するために使用されます。

私が十分な情報を提供したかどうかわからないので、コードの詳細やビットが必要な場合はお知らせください。

4

2 に答える 2

1

行が一番上に挿入される問題について：

最初の「行の追加」のみがクリックを登録する問題について：

  • で選択していidます。IDは一意である（または一意である必要がある）ため$("#additemrow").click(function(){ ... })、onClick関数を呼び出すと、指定されたIDに一致する最初の要素にのみアタッチされます（私が覚えている限り）。
  • 同じonClick関数を複数の要素にアタッチする場合は、class代わりに使用してください。ただし、そうする場合は、クリックした要素を基準.parent()にして新しい要素を挿入する必要があります（たとえば、、.siblings()または同様の関数を使用して）。

あなたの問題＃2に関して、私はあなたが何をしようとしているのか本当にわかりませんが、これは私が気づいたことです：

  • currentListItemローカル変数として宣言してcurrentJobItemいるが使用していないため、スコープでは使用されていないようです。
  • .parents('#items').index('#items').parents('#items')に一致する親要素のみがすでに選択されているため、冗長です'#items'。一致した要素のインデックスを取得する場合は、index()（パラメーターなしで、詳細についてはjquery APIを参照してください）を使用します。

その他の注意事項：

  • 時間がある場合（そしてクリーンなプロジェクトが必要な場合）、Smartyなどのテンプレートエンジンを使用してロジックを出力から分離することをお勧めします。これにより、コードの可読性が向上し、バグの検出/排除も容易になります。

これが少しお役に立てば幸いです。あなたが何をしようとしているのか、そしてあなたがexpextするときに何がうまくいかないのかについてより多くの情報を提供するなら、私はさらなる助けを提供し、私の答えを更新しようとします。

于 2013-03-03T16:30:23.573 に答える
0

親のhtml要素にIDを追加してから、クリックハンドラーで次のようにします。

$("#additemrow").click(function(){
   $("#parent").append(/*Blank Form Row*/);

})
于 2013-03-03T14:51:26.900 に答える