1

我有这些类型的对象：

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 后端是什么样子的吗？

谢谢。

4

4 回答 4

1

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

<!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>
于 2013-09-16T06:41:31.333 回答
0

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;
}
于 2013-09-16T06:42:16.563 回答
0

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

将用户声明为数组

var users = [];

并且只需使用 .push() 方法在数组中插入对象。喜欢

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

所以用户数组看起来像这样

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

这会让你很容易，它会自动处理索引。

于 2013-09-16T06:45:29.940 回答
0

您需要一个集合来执行此操作。你的对象不是一个集合。

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

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

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

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

我使用 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 控制台中查看结果对象。

于 2013-09-16T06:54:40.090 回答