1

私が探しているのは、配列の結果を HTML DIV にダンプするのに役立つ関数またはコードです。さまざまな方法があることは知っていますが、これらはすべて配列を反復処理する必要があります。私が探しているのは、マッピング ツールのようなものです。例えば：

私のjavascriptに次の配列があるとしましょう：

var myarray = [];
myarray['name'] = 'value1';
myarray['lastname'] = 'value2';
myarray['address'] = 'value3';

次にやりたいことは、配列のこれらの値のそれぞれを、HTML DIV 内の対応する値に何らかの方法で関連付けることです。例えば：

<div id="name"></div>
<div id="lastname"></div> 
<div id="address"></div>

または、さらに良いことに、DIV を使用せずにこの情報を取得できるテーブルを HTML に含めることができるようにしたいと考えています。何かのようなもの：

<table width="277" height="146" border="1">
  <tr>
    <td width="97">Name</td>
    <td width="87">{name}</td>
  </tr>
  <tr>
    <td>Lastname</td>
    <td>{lastname}</td>
  </tr>
  <tr>
    <td>Address</td>
    <td>{address}</td>
  </tr>
</table>

したがって、Javascript で (jquery を介して) 値を取得すると、配列の各値を反復処理することなく、配列の内容全体を HTML テーブルに書き込むことができるという考えです。

私の目標を達成するのに役立つ何かがあれば、何かアイデアはありますか?

4

3 に答える 3

2

これは非常に単純なテンプレート システムです。まず、テンプレートのスクリプト タグを作成します。

<script id="template" type="text/html">
  <table width="277" height="146" border="1">
    <tr>
      <td width="97">Name</td>
      <td width="87">{name}</td>
    </tr>
    <tr>
      <td>Lastname</td>
      <td>{lastname}</td>
    </tr>
    <tr>
      <td>Address</td>
      <td>{address}</td>
    </tr>
  </table>
</script>

次に、データを (オブジェクトとして) 指定すると、この小さな関数を使用してテンプレートをレンダリングできます。

// An object, not an array
var data = {
  name: 'value1',
  lastname: 'value2',
  address: 'value3'
};

// Very basic templating
function render(template, data) {
  var patt = /\{([^}]+)\}/g; // matches {key}
  return template.replace(patt, function(_, key) {
    return data[key];
  });
}

// Grab html from template
var template = $('#template').html();

// Generate html given the data and append to body
$('body').append(render(template, data));

デモ: http://jsbin.com/ibeBIxO/1/edit

もう少し洗練されたものが必要な場合は、Underscore templatesをチェックしてください。

于 2013-09-27T01:27:38.383 に答える
0

次のような JSON を使用できます。

var myarray = {
  name: 'value1',
  lastname: 'value2',
  address: 'value3'
}
var tbl = $(table);
$.each(myarray, function(i, v){
  tbl.append('<tr><td>'+i+'</td><td>'+v+'</td></tr>');
});

次に、jQuery の.css()メソッドを使用してスタイルを追加します。

于 2013-09-27T01:24:48.750 に答える