如何在數組中添加輸入值

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; 
    }); 
});