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

これを実行するには、コレクションが必要です。オブジェクトはコレクションではありません。

まず、次のように変更する必要があります。

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 に答える