Question

我有这些类型的对象：

var users = {
  1: {name: "John Smith", description: "CEO Of Google", image: "None"}
  2: {name: "Elizabeth II", description: "Queen of England", image: "None"}
}

我需要通过使用html表单的用户输入为其添加更多值

    Title <input type="text" name="title" id="title_text" />
    Description <input type="text" name="description" id="description_text" />
    Image <input type="text" name="image" id="image_text" />
    <input type="submit" value="Ok" name="add_member"onClick="arrayAdd()" />

你们有没有人可以指出这种操作的JS后端如何？

感谢。

Answer 1

这是一个工作示例：http://jsbin.com/OpOMOsA/1/edit 在chrome中打开一个控制台窗口，你将看到用户数组中的新值。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script>
var users = [
  {name: "John Smith", description: "CEO Of Google", image: "None"},
  {name: "Elizabeth II", description: "Queen of England", image: "None"}
];


function arrayAdd()
{

  var title_text =$("#title_text").val();
  var description_text =$("#description_text").val();
  var image_text =$("#image_text").val();

  users.push({name:title_text,description:description_text,image:image_text});
  console.log(users);
}    
  </script>
</head>
<body>
      Title <input type="text" placeholder="Scott Aasrud" name="title" id="title_text" />
    Description <input type="text" placeholder="VP, Public sector" name="description" id="description_text" />
    Image <input type="text" placeholder="http://example.com/image.jpg" name="image" id="image_text" />
    <input type="submit" value="Ok" name="add_member"onClick="return arrayAdd();" />
</body>
</html>

Answer 2

http://jsfiddle.net/4Gyqk/

包含jQuery库并尝试以下代码：

var users = {}, i = 0;
function arrayAdd() {
   users[i] = {
       "name":$("#title_text").value(),
       "description":$("#description_text").value(),
       "image":$("#image_text").value()
   };
   ++i;
}

或：

var users = {}, i = 0;
function arrayAdd() {
   users[i] = {
       "name":document.getElementById("title_text").value,
       "description":document.getElementById("description_text").value,
       "image":document.getElementById("image_text").value
   };
   ++i;
}

Answer 3

如果你在对象中创建索引，那么你应该使用数组，这对你来说很容易。

将用户声明为

之类的数组

var users = [];

并使用.push（）方法在数组中插入对象。像

var tempObj = {
   "name":$("#title_text").value(),
   "description":$("#description_text").value(),
   "image":$("#image_text").value()
};
users.push(tempObj);

所以users数组看起来像这个

[
   {name: "John Smith", description: "CEO Of Google", image: "None"},
   {name: "Elizabeth II", description: "Queen of England", image: "None"}
]

这将使你很容易自动处理索引。

Answer 4

您需要一个Colletion才能执行此操作。您的对象不是集合。

首先，您需要将其更改为：

var users = [
  {name: "John Smith", description: "CEO Of Google", image: "None"},
  {name: "Elizabeth II", description: "Queen of England", image: "None"}
];

这是可以处理的对象集合。

接下来，您应该使用JS创建一个对象来检索数据并使用“push”函数添加它。

我使用JQuery Javascript框架来回溯表单数据并制作单击处理程序。这也可以仅使用Javascript

来完成

HTML：

Title <input type="text" name="title" id="title_text" /><br/>
Description <input type="text" name="description" id="description_text" /><br/>
Image <input type="text" name="image" id="image_text" /><br/>
<input id="add_button" type="button" value="Ok"  /><br/>

使用Javascript：

var users = [
  {name: "John Smith", description: "CEO Of Google", image: "None"},
  {name: "Elizabeth II", description: "Queen of England", image: "None"}
];

$('#add_button').click(function(){
    var nam = $('#title_text').val();
    var des = $('#description_text').val();
    var img  = $('#image_text').val();

    var row = {name: nam, description: des, image: img};
    users.push(row);
    console.dir(users);    
});

**我在Google Chrome或Firefox中使用“console.dir（users）”来帮助在JS控制台中查看生成的对象。

如何在JavaScript中创建动态对象？

4 个答案: