<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>ドキュメント</ TITLE>
<スタイルタイプ= "テキスト/ cssの">
テーブル{
位置：相対;
}
.head {
幅：700px;
高さ：は50px;
マージン：25ピクセルオート;
/ *ボーダー：1ピクセル赤色固体; * /
}
.but {
マージン左：500pxなど。
}
TD {
テキスト整列：センター。
行の高さ：は50px;
フォントサイズ：20ピクセル;
フォント重量：太字;
幅：120ピクセル;
高さ：30px;
国境：1pxの黒一色。
}
■は{
幅：250ピクセル。
高さ：250ピクセル;
境界：
位置：絶対;
背景色：赤。
テキスト整列：右;
トップ：200pxの。
左：800ピクセル;
表示：なし;
Zインデックス：100;
}
■は>ボタン{
マージントップ：10pxの。
}
</スタイル>
</ HEAD>
<BODY>
<DIV CLASS = "頭">
联系电话：の<input type = "text"の名= ""クラス= "電話"> <ボタンクラス= "ボタン">查询< /ボタン> </br>
<ボタンクラス= "ではなく">删除</ button>の
<ボタンクラス= "but1">添加</ボタン>
</ div>
<divのクラス= "ボックス">
<フォーム>
姓名： <input type = "text"の名= ""
年齢：の<input type = "text"の名= ""プレースホルダ= " "クラス= "int型の年齢を入力してください"> <BR>
電話：の<input type = "text"の名= "は"プレースホルダ= " 電話を入力してください"クラス= "INT"> <BR>
生誕地：の<input type = "text"の名= ""プレースホルダ= " 起源の場所を入力してください"クラス= "INT"> <BR>
説明：の<input type = "text" NAME = " "プレースホルダ="はじめに"クラス=" INT "> <BR>
エントリー時間：の<input type =" text " NAME =" "プレースホルダ=" クラス= "INT「>エントリの時間を入力してください"
</フォーム>
<Buttonクラスを= "BOX1"> </ button>の空
<Buttonクラス= "BOX2">決定</ button>の
<Buttonクラス= "BOX3">を追加</ボタン>
<ボタンクラス= "box4">取消</ボタン>
</ div>
<スクリプトSRC = "01.js"> </ SCRIPT>
</ BODY>
</ HTML>
データ= VAR [
{ "名"： "ジョー・スミス"、 "性別"： "男性"、 "年齢"：20、 "電話"：13076752470、 "原産地"： "湖北"、 "はじめに"： "いいえ" "エントリー時間"： "2011"}、
{ "名"： "趙Xiaoxiao、" "性別"： "女性"、 "年齢"：19、 "電話"：15921347851、 "原産地"： "湖南" "はじめに"： "いいえ"、 "エントリの時間"： "2011"}、
{ "名"： "お金ブック李"、 "性別"： "女性"、 "年齢"：21、 "電話"：17254863571 "出身地"： "北京"、 "はじめに"： "いいえ"、 "エントリの時間"： "2011"}、
{ "名"： "周"、 "性別"： "男性"、 "年齢"：25 「電話」：15767546842、「原産地」：「浙江省」、「はじめに」：「いいえ」、 "エントリー時間"：" 2011 "}、
{"名"："王5 ""性別"："男性""年齢"：34、"電話"：12474855680、"原産地"："天津""はじめに"："いいえ""エントリの時間"：" 2011 "}、
{"名"："鄭夢""性別"："男性""年齢"：25、"電話"：15124875401"出身地"："河北""はじめに"："いいえ""エントリの時間"：" 2011「}
];河北""はじめに"："いいえ""エントリの時間"：" 2011「} ];河北""はじめに"："いいえ""エントリの時間"：" 2011「} ];
VARのbodys = document.body;
VARテーブル=のdocument.createElement（ "表"）。
bodys.appendChild（表）。
table.style.width = "1080px"。
// table.style.height = "1000px"。
table.style.margin = "0オート"。
table.style.border =「1ピクセルベタ黒」。
関数ayy（データ）{
document.getElementsByTagName（ 'テーブル'）[0] .innerHTML = '';
VAR thead要素=のdocument.createElement（ "thead要素"）;
table.appendChild（THEAD）。
//添加表头
（データ内のキー[0]）{ための
VAR TD =のdocument.createElement（ "TD"）。
td.innerHTML =キー。
VAR A = thead.appendChild（TD）。
}
VAR TBODY =のdocument.createElement（ "TBODY"）。
table.appendChild（TBODY）。
tbody.className = "";
//添加内容
のために（VAR iが= 0; I <data.length; I ++）{
VAR TR =のdocument.createElement（ "TR"）。
VAR S = tbody.appendChild（TR）。
tr.style.width = "1080px"。
tr.style.height = "30px";
tr.style.border =「1ピクセルベタ黒」。
{（データ[I]中のvar j）のための
VaRのTD =のdocument.createElement（ "TD"）。
td.innerHTML =データ[I] [J]。
VAR C = tr.appendChild（TD）。
}
}
//追加全选
VARテーブル= document.getElementsByTagName（ "テーブル"）[0] .firstElementChild.firstElementChild
VAR TDS =のdocument.createElement（ "TD"）。
tds.innerHTML = 'の<input type = "チェックボックス"クラス= "" />全选'。
thead.insertBefore（TDS、表）。
TDS。
//追加操作
VARテーブル= document.getElementsByTagName（ "テーブル"）[0] .firstElementChild.firstElementChild
VAR TDS1 =のdocument.createElement（ "TD"）。
tds1.innerHTML = '操作';
thead.appendChild（TDS1）。
//追加单个入力的框;
VAR A = document.getElementsByTagName（ 'TBODY'）[0] .children。
用（VARのJ = 0; J <a.length; J ++）{
VARのTRS = [J] .firstElementChild。
VAR TDSS =のdocument.createElement（ "TD"）;
tdss.innerHTML = 'の<input type = "チェックボックス" />';
[J] .insertBefore（TDSS、TRS）。
tdss.className = "CHB"。
}
//追加删除和修改
VAR A = document.querySelectorAll（ "TR"）;
用（VARのJ = 0; J <a.length; J ++）{
VARのTRS = [J] .firstElementChild。
VAR tdss1 =のdocument.createElement（ "TD"）;
tdss1.innerHTML = '<ボタンクラス= "but1">修改</ button>の</br> <ボタンクラス= "but2">删除</ボタン>';
[J] .appendChild（tdss1）。
//選択したイベント
VAR =すべてdocument.querySelector（ "THEAD> TD：まず、子供> INPUT"）;
//そのクリックイベントの結合、入力のthead要素TDディレクトリ下の表を見つける
all.onclickを関数=（）は、{
VAR = CHB document.querySelectorAll（ "表> TBODY> TR> TD：最初の子>の入力が"）;
//テーブルのすべてのTBODY TD最初の入力を取得
するための（I 0 VARを= ; I <chb.length; I ++）{
//反復各アレイCHB CHB
CHB [I] = this.checked .checkedを;
//関連CHBすべてのそれぞれの状態は同じ状態を持たせます
}
}
//選択単一キャンセル
VAR = CHB document.querySelectorAll（「表> TBODY> TR> TD：まず、子>入力」）;
//入力における全ての第1のテーブルTBODY TDはchbsに格納されている検索
用（VAR私は= 0; I <chb.length; I ++）{
//反復各アレイCHB CHB
CHB [I] .onclick =関数（）{
//結合現在のCHBのイベントをクリックして
（この場合は！チェックする）{
//現在のCHBをオフにすると
all.checked = falseに;
//すべての変更未確認
}
他{
VAR行取消し= document.querySelectorAll（「表> TBODYのTD：まず、子供> INPUT：ありません（：チェックします） 「）;
//は行取消しが表TBODY非選択の全てをtdの最初の入力を取得
IF（unSel.length == 0）{
//長さが行取消し0に等しい場合
all.checked = trueに;
//すべて選択するように修正
} {他
falseにall.checked =を;
//すべての変更未確認
}
}
}
}
//修改事件
VAR but1 = document.getElementsByClassName（ "but1"）;
//にconsole.log（but1）。
用（VARのJ = 0; J <but1.length; J ++）{
but1 [J] .onclick =楽しいです
}
//删除事件
VAR but2 = document.getElementsByClassName（ "but2"）;
ため（VAR iが0 =; I <but2.length; I ++）{
but2 [i]が.onclick = fun2。
}
}
ジョブ（データ）
関数fun（）{
document.getElementsByClassName（ "ボックス"）[0] .style.display = "ブロック"。
VAR TR = this.parentNode.parentNode。
VAR TD = tr.getElementsByTagName（ "TD"）;
VAR入力= document.getElementsByClassName（ "int型"）;
//にconsole.log（入力）
するための（; I <input.length; varはiが0 = I ++）{
入力[I] .VALUE = TD [I + 1] .innerHTML。
}
//确定
VAR BOX2 = document.getElementsByClassName（ "BOX2"）[0];
box2.onclick =関数（）{
document.getElementsByClassName（ "ボックス"）[0] .style.display = "なし"。
// VAR TR = document.getElementsByTagName（ "TR"）;
{//（; N <tr.length N ++ VAR N = 0）のための
VAR TD = tr.getElementsByTagName（ "TD"）。
//}
VAR入力= document.getElementsByClassName（ "INT"）。
{（; I <input.length I ++ iが0 = VAR）のための
TD [I + 1] .innerHTML =入力[I] .VALUE。
}
}
}
//清空
VAR BOX1 = document.getElementsByClassName（ "BOX1"）[0];
box1.onclick =関数（）{
VAR入力= document.getElementsByClassName（ "INT"）。
入力[I] .VALUE = "";
}
}
//删除
関数fun2（）{
VAR TR = this.parentNode.parentNode。
//にconsole.log（TR）;
VAR A = document.getElementsByTagName（ "TBODY"）[0];
//にconsole.log（）;
a.removeChild（TR）
の警告（ "是否删除！"）;
}
//取消
VAR box4 = document.getElementsByClassName（ "box4"）[0];
box4.onclick =関数（）{
document.getElementsByClassName（ "ボックス"）[0] .style.display = "なし"。
}
//添加
VAR but1 = document.getElementsByClassName（ "but1"）[0];
but1.onclick =関数（）{
document.getElementsByClassName（ "ボックス"）[0] .style.display = "ブロック"。
}
VAR入力= document.getElementsByClassName（ "INT"）。
VAR BOX3 = document.getElementsByClassName（ "BOX3"）[0];
box3.onclick =関数（）{
VAR OBJ = {};
用（varがI = 0、I <input.length; I ++）{
OBJ [I] =入力[I] .VALUE。
}
data.push（OBJ）
ayy（データ）
}
//全部删除
VARしかし= document.getElementsByClassName（ "しかし"）[0];
but.onclick =関数（）{
VARのbodys = document.body。
VARテーブル= document.getElementsByTagName（ "テーブル"）[0];
console.log（表）。
bodys.removeChild（表）。
警告（ "确定全部删除！"）;
}
//查询
//入力框
VAR電話= document.getElementsByClassName（ "電話"）[0];
//にconsole.log（電話）;
VARボタン= document.getElementsByClassName（ "ボタン"）[0];
//にconsole.log（ボタン）。
button.onclick =関数（）{
// VAR A1 = document.querySelectorAll（ "A TR。"）;
// VAR A1 = document.querySelectorAll（ "テーブルのtbody trのTD：n番目の子（5）"）;
// コンソール。記号（1？）。
//たARR = [];
//ため（VAR iが= 0; I <a1.length; I ++）{
// VAR TD = tr.getElementsByTagName（ "TD"）。
//}
//ため（; I <a1.length; I = 0、ARR = [] VAR I ++）{
//もし（！A1 [I] .innerHTML.indexOf（phone.value）= -1）{
/ / arr.push（A1 [I]）
//}
//}
// ayy（ARR）。
//
VAR ARR = [];
ため（VAR iが0 =; I <data.length; I ++）{
IF（データ[I] [ "联系电话"] == phone.value）{
arr.push（データ[I]）。
}
}
ayy（ARR）。
}
私は場所のアイデアを分析する前に確認する方法がわかりません