A.表
メソッドのテーブルを作成します。
テーブルを作成します。
VARテーブル=のdocument.createElement（ "表"）。
その後、thead要素でテーブルに追加されました
VAR THEAD = table.createTHead（）。
thead要素TR内での行を追加します。
VAR TR = thead.insertRow（）。
行TRに列を追加します。
VaRのTD = tr.insertCell（）。
のフォームに動的な機能の追加および削除について
表のスタイル
<スタイルタイプ= "テキスト/ cssの">
表{
国境崩壊：崩壊。
幅：400ピクセル;
高さ：100pxに。
国境：1pxの黒の固体;
}
TABLE> THEAD {
フォント重量：太字;
}
テーブルTD {
国境：1pxの黒の固体;
テキスト整列：センター;
}
</スタイル>
JSコードセクション：
<身体>
<DIV ID = "データ"> </ div>
ます。<script type = "text / javascriptの">
データ= [
{ "ID" 10、 "名前"： "AD钙"、 "価格"：2.0、 "カウント"：100}、
{ "ID"：20、 "名前"： "农夫山泉"、 "価格"：2.0、 "カウント"：200}、
{ "ID"：30、 "名前"： "菠萝啤"、 "価格"：3.0、 "カウント"：300}、
{ "ID"：40、 "名前"： "柠檬柚子水"、 "価格"：6.0、 "カウント"：50}、
];
//テーブルを作成します。
VARテーブル=のdocument.createElement（ "表"）。
//内のテーブルにTHEADを追加
VAR THEAD = table.createTHead（）。
// thead要素TR中に追加
VAR TR = thead.insertRow（）。
//第1のデータ配列の各アイテムのプロパティをループ
ため（データにおけるVARキー[0]）{
// trのtdの中に追加し、現在のプロパティ名にその内容を設定します
tr.insertCell（）のinnerHTML =キー。
}
//この列の操作を追加
。Tr.insertCell（）のinnerHTML = "操作"。
//の表にTBODYを追加
VaRのTBODY = table.createTBody（）。
//各項目についてデータアレイを横切ります
用（VARのJ = 0; J <data.length; J ++）{
//でのTBODY TRを追加
VAR TR = tbody.insertRow（）。
//現在の商品には、各属性データをトラバース
{（データにおけるVARキー[J]）のために
// trのtdの、TDに追加し、現在の商品の現在のプロパティ値の内容を設定します
tr.insertCell（）のinnerHTML =データ[J] [キー]。
}
VAR delebut =のdocument.createElement（ "ボタン"）;
delebut.innerHTML = "削除";
VAR amendbut =のdocument.createElement（ "ボタン"）;
amendbut.innerHTML =「修飾」。
VaRのアドオン=のdocument.createElement（ "ボタン"）;
add.innerHTML = "追加";
VaRのTD = tr.insertCell（）。
td.appendChild（delebut）; //删除
td.appendChild（amendbut）; //変更
td.appendChild（追加）; //追加
//クリックイベントを削除
delebut.onclick =関数（）{
VAR TR = this.parentNode.parentNode。
//console.log(tr）;
//人道的プロンプトあなたが特定のデータを削除するかどうかを確認します
{（tr.cells + "あなたが削除しますか"（[1] .innerHTMLを確認））の場合
table.deleteRow（tr.rowIndex）。
}
}
//変更イベントをクリックしてください
amendbut.onclick =関数（）{
VAR TR = this.parentNode.parentNode。
するvar i = 0;
{（tr.cells + "を編集したいか"（[1] .innerHTMLを確認））の場合
VAR R = tr.rowIndex。
ため（データ内のvarキー[R]）{
データ[R] [キー] =プロンプト（ "編集" キー+）。
tr.cells [I] .innerHTML =データ[R] [キー]。
I ++;
}
}
}
//イベントを追加]をクリックします
add.onclick =関数（）{
tbody.insertRow TR = VAR（）;
IF（確認（） "あなたは、新しいコンテンツを追加しますか"）{
ため（データにおけるVARキー[0]）{
VaRのTD = tr.insertCell（）。
VARの内容=プロンプト（「入力」+キー）。
td.innerHTML =コンテンツ;
}
VAR delebut =のdocument.createElement（ "ボタン"）;
delebut.innerHTML = "削除";
VAR amendbut =のdocument.createElement（ "ボタン"）;
amendbut.innerHTML =「修飾」。
VaRのアドオン=のdocument.createElement（ "ボタン"）;
add.innerHTML = "追加";
VaRのTD = tr.insertCell（）。
td.appendChild（delebut）; //删除
td.appendChild（amendbut）; //変更
td.appendChild（追加）; //追加
}
}
}
// IDにデータ要素のテーブルを追加します。
document.getElementById（ 'データ'）のappendChild（表）。
</ SCRIPT>
</ BODY>
インタフェースディスプレイ：
インターフェイスを削除します。
インターフェイスを変更します。
インターフェイスを追加します。
ローカルインタフェースの欠如：追加されたコンテンツは、内部配列に追加されていない、ただのインターフェイスに追加するコンテンツを追加し、
コンテンツを追加した後に動作することはできません