JavaScript が Web ページにテーブル実装コードを動的に追加する_JavaScript スキル

//このコードは IE9、Firefox、Chrome、および safair でテストされており、問題はありません。いくつかの簡単なスタイルがテーブルに追加されています。基本的な機能は実現できますが、改善する必要がある問題がいくつかあります。 ！

レンダリングは次のとおりです:

コードは次のとおりです:

コードをコピー コードは次のとおりです。

">
caption {
padding: 0 0 5px 0;
width: 450px;
font: italic 11px "Trebuchet MS"、Verdana、Arial、Helvetica、sans-serif;
テキスト整列: 右;
}
border:1px ソリッド

カラー: #4f6b72; -align: center ;
width:150px;

var data=[{name:'シャオシャオ'、年齢:12、性別:'男性'}、{名前:'シャオ'、年齢:22、性別:'男性'}、{名前:'hh'、年齢:12、性別:'女性'}、 {name:' ran',age:20,gender:'girl'}];

//Web ページがロードされた後に onload イベントを実行します
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(caption);
//createTr() メソッドを呼び出してタイトル行を生成し、テーブルに追加します。
table.appendChild(createTr('名前','年齢','性別'));
table.childNodes[1].setAttribute('style','background:#cae8ea;'); >//alert(table.firstChild);
//for は json オブジェクトをループし、createTr() メソッドを通じてループされたオブジェクトの行を生成し、それをテーブルに追加します
for(var i=0) ;itable.appendChild(createTr(data[i].name,data[i].age,data[i].gender)); table;
};


//ユーザーによって渡された変数に基づいてテーブルに行を生成するメソッド
var createTr = function(name,age,gender){
//行要素のラベルを定義します
var tr=document.createElement('tr');
//列要素のラベルを定義します
var tdName=document.createElement('td'); /列ノードのテキストを設定します。
tdName.innerHTML = name;

tdAge.innerHTML = age; 🎜>var tdGender = document.createElement(' td');

tdGender.appendChild(document.createTextNode(gender));// tdGender.innerHTML = 性別と同等
// 列を追加します。行要素ノード
tr .appendChild(tdAge);
tr.appendChild(tdGender); // 生成された行ラベルを返します。 🎜>return
};

🎜>