<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<タイトル>表の削除</ TITLE>
<スタイル>
。パネル{
幅：760px;
国境：1pxの固体#ddd。
国境半径：5pxの;
パディング：20ピクセル;
マージン：10pxの自動;
}
.panel>ラベル{
マージン右：10pxの;
}
.panel入力{
フォントサイズ：14px;
色：＃444;
パディング：5pxの;
}
.panel入力[タイプ=テキスト] {
幅：100ピクセル;
}
。リスト{
幅：800ピクセル;
国境：1pxの固体#ddd。
マージン：10pxの自動;
}
.LISTテーブル{
幅：800ピクセル;
国境崩壊：崩壊。
国境：1pxの固体#CCC。
フォントサイズ：14px;
フォントファミリ：「微軟雅黒」;
行の高さ：14px;
色：＃444;
}
.LIST THEAD {
背景色：＃369;
色：#FFF;
フォント重量：太字;
フォントサイズ：16pxに;
}
.LIST番目、.LIST TD {
国境：1pxの固体#CCC。
パディング：10pxの;
テキスト整列：センター;
}
.LIST TBODY {
色：＃369;
テキスト装飾：なし;
}
</スタイル>
<スクリプト>
関数$ ID（ID）{
document.getElementById（ID）を返します。
}
window.onload =関数（）{
$ ID（ '追加'）のonclick =関数（）{
1 //ユーザーが入力したデータを取得します
。VAR SID = $ ID（ 'serNo'）値。
VaRのSNAME = $のID（ 'stuName'）値。
VaRのSNO = $のID（ 'stuNo'）値。
。ヴァールsGender = $のID（ 'ナンは'） 'M' にチェック： '女性' を;?
//にconsole.log（sGender）。
VARデル= '<a href="#">删除</a>の';
VaRのTBODY = document.getElementsByClassName（ 'リスト'）[0] .getElementsByTagName（ 'TBODY'）[0];
VAR newTr =のdocument.createElement（ 'TR'）;
// trの内のすべてのtdタグを綴ります
VAR trInnerHtml = '<TD>' + SID + '</ TD>';
trInnerHtml + = '<TD>' + SNAME + '</ TD>'。
trInnerHtml + = '<TD>' + SNO + '</ TD>'。
trInnerHtml + = '<TD>' + sGender + '</ TD>'。
trInnerHtml + = '<TD>' +デル+ '</ TD>'。
newTr.innerHTML = trInnerHtml。
// newTrに登録onclickイベントにラベルを削除
VAR delLink = newTr.getElementsByTagName（ 'A'）[0];
delLink.onclick =関数（）{
VAR TR = this.parentNode.parentNode。
VaRのTBODY = tr.parentNode。
tbody.removeChild（TR）。
}
//のtbody trの内部に挿入
tbody.append（newTr）。
}
// 2.イベント登録を削除します。
VaRのDELS = document.getElementsByClassName（ 'リスト'）[0] .getElementsByTagName（ 'A'）。
ため（VAR i = 0; iはdels.lengthを<; iは++）{
DELS [i]は.onclick =関数（）{
VAR TR = this.parentNode.parentNode。
VaRのTBODY = tr.parentNode。
tbody.removeChild（TR）。
}
}
}
</ SCRIPT>
</ head>の
<身体>
<DIV CLASS = "パネル">
< "=ラベル">序号：の<input type = "テキスト" ID = "serNo"> </ラベル>
< "=ラベル">姓名：の<input type = "テキスト" ID = "stuName"> </ラベル>
< "=ラベル">学号：の<input type = "テキスト" ID = "stuNo"> </ラベル>
性別<= "" のラベル>：
男< "ナン" =のラベル>の<input type = "ラジオ" NAME = "性別" 値= "ナン" ID = "ナン" チェック= "チェック"> </ label>は</ラベル>
<input type = "ラジオ" NAME = "性別" 値= "NV" ID = "NV"> </ラベル>：女<= "NV" のラベル>
</ label>は
<input type = "ボタン" ID =値 "を追加" = "添加">
</ div>
<DIV CLASS = "リスト">
<表>
<THEAD>
<TR>
<TH> ID </目>
<TH>名前</目>
<TH>学生ID </目>
<TH>性別</目>
<TH>操作</目>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> 1 </ TD>
<TD> Xuyou清</ TD>
<TD> 160985147 </ TD>
<TD>男</ TD>
<TD> <a href="#">删除</a>の</ TD>
</ TR>
</ TBODY>
</ TABLE>
</ div>
</ BODY>
</ HTML>