テーブル内にクライアント側のテンポラリデータを表示

Question

このイメージを参照してください。問題をより詳しく説明してください。 私は2つのデータベーステーブルにデータを格納するマスター/ディテールフォーム（この場合はBOM）を持っています。

フォームの最上部（製品、数量）はマスターテーブルに格納され、挿入されたID（FKとして）の下に、詳細テーブルには下に入力した数のコンポーネントと数量が入力されます。

しかし、最終SAVEは（送信）が押されるまで、私は、アレイ内のJavaScriptオブジェクトにコンポーネントID（ドロップダウンリストから値）と（入力フィールドからの）量を記憶しています：

var products = []; 
     $("#add").click(function(){ 

      var prodname_fk = $("select").val(); 
      var prodname = $("select option:selected").text(); 
      var quantity = $("#quantity").val(); 

       //Checks if the product or quantity has not been selected 
       if (quantity == '' || prodname_fk == '') 
       { 
        alert("Please select product and quantity!"); 
        return false; 
       } 
      //Pushes the Objects(products [id,quantity,prodname,uom]) into the Array  
      products.push({id:prodname_fk,prodname:prodname,quantity:quantity}); 

       //Test Purpose CONSOLE output 
       var i = 0; 
       $.each(products, function(){ 
         console.log(products[i].id + " --> " + products[i].prodname + " --> " + products[i].quantity); 
         i++; 

       }); 

      //Emptys the product and quantity 
      $("select").val(""); 
      $("#quantity").val(""); 
     }); 

以下の表に目的を表示するための製品名（ドロップボックスからのテキスト）も取得します。

だから、私の質問は：

• それはどのように述べていないテーブルでは、私は、出力コンポーネントと数量することができ、各ADDを押した後、「いいえレコードを！」？ （ADDはページを送信またはリフレッシュしません）

• アレイからオブジェクトごとに同じテーブルに「削除」機能を追加するにはどうすればよいですか？

• コンポーネントが既にアレイ内に存在するかどうかを確認し、数量を加算するだけですか？

これは私のフォームです：

は事前にありがとうございました！

p.s.あなたがのためにサーブレットにXML HTTPリクエストを作成する必要がありますが、AJAX呼び出しを行う方法で、処理されたデータに

を返しますが、ここでのAjaxとそれをタグ付けするのでHow to store temporary data at the client-side and then send it to the server

Answer 1

テーブルに値を追加するには、$.append()と$.appendTo()を参照してください。 $("<tr />")を経由して、あなたの新しい行を作成し、$.appendTo()であなたのテーブルにそれを追加します。

var newRow = $("<tr />").appendTo("#myTable"); 

あなたが今のセルを追加することができますので、あなたは今、新しい行への参照を持っている：

var newRow = $("<tr productId=\"" + prodname_fk + "\" />") 
    .appendTo("#myTable") 
    .append("<td class=\"code\" />") 
    .append("<td class=\"component\">" + prodname + "</td>") 
    .append("<td class=\"quantity\">" + quantity + "</td>") 
    .append("<td class=\"uom\" />") 
    .append("<td><span class="deleteButton">delete</span></td>"); 

は、行を削除します。このように：

：

$("#myTable .deleteButton").click(function(e) { 
    $(this).closest("tr").remove(); 
}); 

データを格納処理するために、私は、オブジェクトではなく、配列を使用したいです210

var products = {}; 
$("#add").click(function() { 

    ... 

    if (prodname_fk in products) { 
     products[prodname_fk].quantity += quantity; 
     $("#myTable tr[productId='" + prodname_fk + "'] .quantity").text(products[prodname_fk].quantity) 
    } 
    else { 
     products[prodname_fk] = { prodname:prodname, quantity:quantity }; 
     var newRow = $("<tr productId=\"" + prodname_fk + "\" />") 
      ... // append to table and append cells 
     $(".delete", newRow).click(function(e) { 
      delete products[$(this).closest("tr").attr("productId")]; 
      $(this).closest("tr").remove(); 
     }); 
    } 

    ... 

}); 

未テストですので、誤字を犯してください。概念は正しい。

Answer 2

：私はこのような何かを達成しようとしていますあなたは今、あなたはjavascriptを

var url="urlofPHPpage"; 
var para="parmeter1=prodname_fk&parameter2=prodname&parameter3=quantity; 
myxmlhttpobj.open("POST",url,true); 
myxmlhttpobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
myxmlhttpobj.setRequestHeader("Content-length", para.length); 
myxmlhttpobj.setRequestHeader("Connection", "close"); 
myxmlhttpobj.onreadystatechange=ajaxComplete; 
myxmlhttpobj.send(para); 

からサーバへのリクエストを行う必要があり

var myxmlhttpobj=new GetXmlHttpObject(); 
function GetXmlHttpObject() 
    { 
     if (window.XMLHttpRequest) 
     { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      return new XMLHttpRequest(); 
     } 
     if (window.ActiveXObject) 
     { 
      // code for IE6, IE5 
      return new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     return null; 
    } 

HTMLページ内のJavaScriptのXML HTTPオブジェクトを作成する必要があること

あなたが結果を処理する必要があり、それを文字列として返送されたサーバーで：

プロセスの入力および追加コンテンツのテーブルを用意し、文字列

の形で入れてライトバック

にそれを送りました

リクエストが戻ったら、myxmlhttpobj.onreadystatechange = ajaxComplete;役立つはず

function ajaxComplete(){ 


    if(myxmlhttpobj.readyState==4){ 

     ///Display the result on the HTML Page 

    } 
} 

と呼ばれる...

もjQuery Ajax APIを見てみましょう。

Answer 3

可能な方法の1つは、通常の可視フィールドの横の非表示フィールドに一時データを置くことです。非表示フィールドは入力タグなので、javascriptを使用してこれらの非表示フィールド値を簡単に取得してサーバーに送信できますフォームを送信すると、他の入力タグと同じ値をサーバー側から取得できます。

Answer 4

あなたは後に追加ボタンのクリックイベント内でこのコードを配置することができ、あなたのaddメソッド

$('<tr>').append($('<td>').text(prodname)) 
      .append($('<td>').text(quantity)) 
      .append($('<td>').append($('<button>').text('Delete').addClass('Delete').attr('id', CurrentIDHere))) 
      .appendTo('tbody'); 

のこの内部のクリックイベントのようなものを書くことができthead要素とtbodyのコンポーネントで使用すると、HTMLテーブルでこれを表示したいと仮定すると検証ロジック。詳細セクションのIDを取得し、配列から対応するエントリを削除するdeleteクラスのクリックハンドラを追加できます。コードはテストされていません