如何在数组中添加输入值

how to add the input values in an array

本文关键字：添加 输入 数组      更新时间：2023-09-26

我只是想问关于在数组中添加数据。但是我想放的数据来自输入框的表。以下是我一直在练习获取数据的代码:

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

您应该能够使用以下命令遍历所有文本框:

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

其中myItems是您的项目的全局容器，#addItem是您的表单。

jsfiddle更新。

如果你使用一个表单和一个提交按钮，那么你应该能够实现一个非JavaScript的方法来添加你的信息，这样网站将被没有启用JavaScript的人访问。

试试这个，抱歉修改你的表单，但它工作得很好:

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

遍历所有键，并添加值。(代码由头脑编写，未经过测试)

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

你可以使用javascript的数组推送函数:

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

对不起，我只看了一眼其他的解决方案。

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