配列に入力値を追加する方法

Question

配列内のデータの追加について質問するだけです。しかし、私は入れたかったデータは、入力ボックスのテーブルから..ですここで私は、データを取得するために練習してきたコードだ：

http://jsfiddle.net/yajeig/4Nr9m/69/

私は毎回追加ボタンを持っています私はそのボタンをクリックし、それはmy_data変数にデータを格納します。

私はこのように私の変数に何かに出力を生成します：

my_data = [ {plank:"1",thickness:"4",width:"6",length:"8",qty:"1",brdFt:"16"}] 

と私は再び別のデータを追加した場合、それはその変数に追加されますと、それはこのようなものになる：

my_data = [ {plank:"1",thickness:"4",width:"6",length:"8",qty:"1",brdFt:"16"}, 
    {plank:"2",thickness:"5",width:"6",length:"2",qty:"1",brdFt:"50"}] 

私が今持っているコードは本当に悪いので、助けてください。

は、現在、私の出力： 1,4,6,4,1

Answer 1

あなたは以下を使用して、テキストボックスのすべてを反復処理することができるはずです。

function add(e) { 
    var obj = {}; 

    $('#addItem input[type="text"]') 
     .each(function(){obj[this.name] = this.value;}); 
    myItems.push(obj); 
} 

ここで、myItemsはあなたの商品のグローバルコンテナであり、#addItemはあなたのフォームです。

jsfiddleが更新されました。

フォームと送信ボタンを使用する場合、JavaScriptを使用しないユーザーがサイトにアクセスできるように、JavaScript以外のメソッドを実装して情報を追加できます。

Answer 2

は、すべてのキーを繰り返し処理、および値を追加します。 （心から書かれたコード、テストされていない）

var added = { }; 
for (var i = 0; i < my_data.length; i ++) { 
    var json = my_data[i]; 
    for (var key in json) { 
    if (json.hasOwnProperty(key)) { 
     if (key in added) { 
     added[key] += json[key]; 
     } else { 
     added[key] = json[key]; 
     } 
    } 
    } 
} 

Answer 3

あなたはthe javascript array push functionを使用することができます。

var data = [{plank:"1",thickness:"4",width:"6",length:"8",qty:"1",brdFt:"16"}]; 

var to_add = [{plank:"2",thickness:"5",width:"6",length:"2",qty:"1",brdFt:"50"}]; 

data = data.concat(to_add); 

Answer 4

申し訳ありません申し訳ありませんが、私は他の解決策を見ていました。

$(document).ready(function() { 
var myData=[]; 
    var myObject = {} 
     $("input").each(function() { 
      myObject[this.id]=this.value 
     }); 
    alert(myObject["plank"]) 
    myData.push(myObject) 
}); 

Answer 5

フォームを修正するため申し訳ありませんが、これを試してみて、それがうまく機能：

HTML：

<form method="post" action="#" id="add_plank_form"> 
    <p><label for="plank_number">Plank number</label> 
    <p><input type="text" name="plank_number" id="plank_number"/></p> 

    <p><label for="plank_width">Width</label> 
    <p><input type="text" name="plank_width" id="plank_width"/></p> 

    <p><label for="plank_length">Length</label> 
    <p><input type="text" name="plank_length" id="plank_length"/></p> 

    <p><label for="plank_thickness">Thickness</label> 
    <p><input type="text" name="plank_thickness" id="plank_thickness"/></p> 

    <p><label for="plank_quantity">Quantity</label> 
    <p><input type="text" name="plank_quantity" id="plank_quantity"/></p> 

    <p><input type="submit" value="Add"/> 
</form> 

<p id="add_plank_result"></p> 

Javascriptを：の束であなたをスパム

$(document).ready(function() { 

    var plank_data = Array(); 

    $('#add_plank_form').submit(function() { 

     // Checking data 
     $('#add_plank_form input[type="text"]').each(function() { 
      if(isNaN(parseInt($(this).val()))) { 
       return false; 
      } 
     }); 

     var added_data = Array(); 
     added_data.push(parseInt($('#plank_number').val())); 
     added_data.push(parseInt($('#plank_width').val())); 
     added_data.push(parseInt($('#plank_length').val())); 
     added_data.push(parseInt($('#plank_thickness').val())); 
     added_data.push(parseInt($('#plank_quantity').val())); 

     $('#add_plank_form input[type="text"]').val(''); 

     plank_data.push(added_data); 

     // alert(JSON.stringify(plank_data)); 

     // compute L x W x F for each plank data 
     var computed_values = Array(); 
     $('#add_plank_result').html(''); 
     for(var i=0; i<plank_data.length; i++) { 
      computed_values.push(plank_data[i][1] * plank_data[i][2] * plank_data[i][3]/12); 
      $('#add_plank_result').append('<input type="text" name="plank_add[]" value="' + computed_values[i] + '"/>'); 
     } 

     return false; 
    }); 
});