知識ポイント：
操作テーブル：のinsertRow（）、deleteRowを（
）、insertCell（）、deleteCell（）
表形式で一般的に使用されるメソッドとプロパティ：
deleteRowを（行番号）：行を削除
rowIndexに：行数の現在値を取得します。
insertRow（行番号）：行、行数の値を追加します。
insertCell（数）：TD細胞を添加し、細胞数を表します
parentNode：親を探して代表
内容は、コードの上に直接、比較的単純です
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= " UTF-8 " >
<タイトル>テーブル</ TITLE>
<スタイルタイプ= " テキスト/ cssの" >
* {
マージン：0 ;
パディング：0 ;
}
{
リスト - スタイル：なし。
}
テーブル{
幅：600PX。
高さ：自動;
国境 - 崩壊：崩壊。
マージン：10pxの自動;
テキスト - 整列：センター;
}
目、TD {
パディング：10pxの;
}
テーブルTR：n番目 -child（1 ）{
テキスト - 整列：右;
}
入力{
概要：なし。
}
</スタイル>
</ head>の
<身体>
<テーブルのボーダー= " 1 " >
<キャプション> CRUD </キャプション>
<TR>
<TD COLSPAN = " 1 " >
<ボタンクラス = " insertTr " >插入行</ボタン>
</ TD>
<TD COLSPAN = " 4 " >
筛选：の<input type = " テキスト"名前= " filterStudent " >
</ TD>
</ TR>
<TR>
<番目>学号</目>
<TH>名前</目>
<TH>性別</目>
<TH>年齢</目>
<TH>操作</目>
</ TR>
<TR>
<TD> 01 </ TD>
<TD> NIO </ TD>
<TD>女</ TD>
<TD> 10 </ TD>
<TD>
<ボタンクラス = " 編集" >编辑</ボタン>
<ボタンクラス = " 削除" >删除</ボタン>
</ TD>
</ TR>
<TR>
<TD> 02 </ TD>
<TD>バブル</ TD>
<TD>男</ TD>
<TD> 16 </ TD>
<TD>
<ボタンクラス = " 編集" >编辑</ボタン>
<ボタンクラス = " 削除" >删除</ボタン>
</ TD>
</ TR>
<TR>
<TD> 03 </ TD>
<TD>ヘクタール</ TD>
<TD>男</ TD>
<TD> 17 </ TD>
<TD>
<ボタンクラス = " 編集" >编辑</ボタン>
<ボタンクラス = " 削除" >删除</ボタン>
</ TD>
</ TR>
</ TABLE>
<スクリプトタイプ= " テキスト/ javascriptの" >
/ *
deleteRowを（行番号）：行を削除
rowIndexに：行数の現在値を取得します。
* /
VAR insertTr = document.querySelector（' .insertTr ' ）;
VAR deleteBtn = document.querySelector（' .delete ' ）;
VAR tableEle = document.querySelector（' テーブル' ）。
/ * 插入* /
insertTr.addEventListener（' クリック' 、機能（）{
tableEle.insertRow（tableEle.rows.length）。/ * 插入空行* /
はconsole.log（tableEle.rows [ 1 ]）
のための（VAR iが= 0 ; I <tableEle.rows [ 1 ] .cells.length; I ++ ）{
tableEle.rows [tableEle.rows.length - 1 ] .insertCell（I）。
}
tableEle.rows [tableEle.rows.length - 1 ] .cells [I- 1 ] .innerHTML = `
<ボタンクラス = " 編集" >编辑</ボタン>
<ボタンクラス = " 削除" >删除</ボタン>
`
}）
/ * +削除する編集機能* /
tableEle.addEventListenerを（' クリック' 、機能（）{
VARの currentRowの= イベント.target.parentNode.parentNode;
/ * 編集* /
IF（イベント .target.className == " 編集" ）{
/ *
コードを編集します
テーブル<TD>または<TH>要素内のすべてのセルのセットを返します。
* /
場合（！のcurrentRow.cells [ 0 {] .isContentEditable）
のために（varが iは= 0 ; I <currentRow.cells.length- 1 I ++; {）
currentRow.cells [I] .contentEditableは = 真。
イベント .target.textContent = " 保存" ;
currentRow.cells [ 0 ] .focus（）。
}
} 他{
ためには、（VaRは iが= 0 ; I <currentRow.cells.length- 1 ; I ++ ）{
currentRow.cells [i]は.contentEditable = 偽;
イベント .target.textContent = " 编辑" 。
}
}
}
/ * 削除* /
IF（イベント .target.className == " 削除" ）{
VAR質問を=（確認して' 銀行削除するOK？' ）;
IF （問）{
VARのインデックスを;
/ *
すべての行のコレクションライン（のTableRowオブジェクト）テーブルの配列を返します
* /
のために（VAR iが= 0 ; I <tableEle.rows.lengthは、iが++ ）{
場合（tableEle.rows [I] == currentRowの）{
インデックス = I;
console.log（インデックス）。
休憩;
}
}
/ *
操作テーブル：のinsertRow（）、deleteRowを（）、insertCell（）、deleteCell（）
* /
tableEle.deleteRow（インデックス）。
}
}
}）
</ SCRIPT>
</ BODY>
</ HTML>