//このコードは、IE9、Firefox、Chorme、およびSafairでテストされています。
レンダリングは次のとおりです。
これがコードです：
コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> JSONアレイをテーブル</title>に変換します
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<style type = "text/css">
キャプション{
パディング：0 0 5px 0;
幅：450px;
フォント：イタリック11px "Trebuchet MS"、Verdana、Arial、Helvetica、Sans-Serif;
テキストアライグ：右;
}
TD {
ボーダー：1pxソリッド＃C1DAD7;
パディング：6px 6px 6px 12px;
色：＃4F6B72;
テキストアライグ：センター;
幅：150px;
}
</style>
<script type = "text/javascript">
var data = [{name： 'xiaoxiao'、age：12、gender： 'male'}、{name： 'xiao'、age：22、gender： 'male'}}、{name： 'hh'、age：12 、性別：「女性」}、{name： 'ran'、age：20、gender： 'female'}];
// Webページのロード後にオンロードイベントが実行されます。
onload = function（）{
var body = document.getElementsByTagname（ 'body'）[0];
Body.AppendChild（createTable（data））;
};
//渡されたJSONアレイに基づいてテーブルを作成します
var createTable = function（data）{
//テーブルを定義します
var table = document.createelement（ 'table'）;
table.setattribute（ 'style'、 'width：450px;'）;
//テーブルタイトルを定義します
var caption = document.createelement（ 'caption'）;
caption.innerhtml = '学生情報テーブル';
//タイトルをテーブルに追加します
Table.AppendChild（キャプション）;
// createtr（）メソッドを呼び出してタイトル行を生成し、テーブルに追加します。
Table.AppendChild（createtr（ 'name'、 'age'、 'gender'））;
table.childnodes [1] .setattribute（ 'style'、 'background：＃cae8ea;'）;
//alert(table.firstchild）;
//ループJSONオブジェクトの場合、ループされたオブジェクトはtreateTr（）メソッドを作成して生成され、テーブルに追加されます
for（var i = 0; i <data.length; i ++）{
Table.AppendChild（createtr（data [i] .name、data [i] .age、data [i] .gender））;
}
テーブルを返します。
};
//ユーザーが送信した変数に基づいてテーブル内で行を生成する方法
var createtr = function（name、age、gender）{
//行の要素ラベルを定義します
var tr = document.createelement（ 'tr'）;
//列要素ラベルを定義します
var tdname = document.createelement（ 'td'）;
//列ノードのテキストノードの値を設定します
tdname.innerhtml = name;
var tdage = document.createelement（ 'td'）;
tdage.innerhtml = age;
var tdgender = document.createelement（ 'td'）;
tdgender.appendChild（document.createTextNode（gender））; // tdgender.innerhtml = gender;
//行要素ノードに列値を追加します
Tr.AppendChild（TDNAME）;
Tr.AppendChild（TDAGE）;
Tr.AppendChild（TDGENDER）;
//生成された行ラベルを返します
trを返します。
};
</script>
</head>
<body>
</body>
</html>