要求
添加一個學生信息表格，表格的信息有編號、姓名、性別三個字段，可以隨意向表格中添加學生信息、刪除學生信息。
步驟分析
- 定義可以向表格中添加信息的文本框和一個添加按鈕
- 定義一個表格
- 給添加按鈕綁定點擊事件
- 獲取文本框的內容
- 創建單元格，設置單元格的內容為文本框內容
- 創建表格行
- 將單元格添加到表格行中
- 獲取表格對象，將表格行添加到表格中去
- 定義刪除信息的方法
步驟實現
-
定義三個文本框 + 一個添加按鈕
<div> <input type="text" id="id" placeholder="請輸入編號"> <input type="text" id="name" placeholder="請輸入姓名"> <input type="text" id="gender" placeholder="請輸入性別"> <input type="button" value="添加" id="btn_add"> </div>效果如下：
-
使用CSS，對div標簽進行描述：將三個文本框和一個按鈕，中心對齊，邊沿長度為50個像素點
div{ text-align: center; margin: 50px; }效果如下：
-
定義一個表格
<table> <!-- 表格標題 --> <caption>學生信息表</caption> <!-- 表格第一行：表格表頭 --> <tr> <th>編號</th> <th>姓名</th> <th>性別</th> <th>操作</th> </tr> <!-- 表格第二行：學生信息2 --> <tr> <td>1</td> <td>令狐沖</td> <td>男</td> <!-- 在該單元格中創建一個鏈接標簽，void運算符來阻止href返回值，通過onclick事件(鼠標點擊)屬性來刪除信息行--> <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td> </tr> <!-- 表格第三行：學生信息2 --> <tr> <td>2</td> <td>任我行</td> <td>男</td> <!-- 在該單元格中創建一個鏈接標簽，void運算符來阻止href返回值，通過onclick事件(鼠標點擊)屬性來刪除信息行--> <td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td> </tr> <!-- 表格第四行：學生信息3 --> <tr> <td>3</td> <td>岳不群</td> <td>?</td> <!-- 在該單元格中創建一個鏈接標簽，void運算符來阻止href返回值，通過onclick事件(鼠標點擊)屬性來刪除信息行--> <td><a href="javascript:void(0);" onclick="delTr(this);" >刪除</a></td> </tr> </table>效果如下：
-
通過CSS，對表格進行描述：表格居中，為表格創建一個方框（方框寬度為500px），方框自動向中對齊三個文本框和一個按鈕
table{ border: 1px solid; margin: auto; width: 500px; }效果如下：
-
通過CSS，對表格中的行、單元格進行描述：文本信息向中對齊，每個單元格添加一個方框
td,th{ text-align: center; border: 1px solid; }效果如下：
-
通過JavaScript：獲取添加按鈕對象
// 1.獲取按鈕 var btn_add = document.getElementById("btn_add"); -
通過JavaScript：獲取文本框對象，然后通過其對象獲取文本框內容
// 2.1 獲取文本框對象 var idObject = document.getElementById("id"); var nameObject = document.getElementById("name"); var genderObject = document.getElementById("gender"); // 2.2 獲取文本框的內容 var id = idObject.value; var name = nameObject.value; var gender = genderObject.value; -
通過JavaScript：定義創建表格單元格的HTML
//3.創建單元格，賦值單元格的標簽體 // id 的單元格 var td_id = document.createElement("td"); // 創建單元格 var text_id = document.createTextNode(id); // 賦值給單元格的標簽體 td_id.appendChild(text_id); // name 的單元格 var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.appendChild(text_name); //gender 的單元格 var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); // a標簽的單元格 var td_a = document.createElement("td"); var ele_a = document.createElement("a"); ele_a.setAttribute("href","javascript:void(0);"); ele_a.setAttribute("onclick","delTr(this);"); var text_a = document.createTextNode("刪除"); ele_a.appendChild(text_a); // 為a標簽寫入文本內容："刪除" td_a.appendChild(ele_a); // 為td標簽添加子標簽（a標簽） -
通過JavaScript：定義創建表格行的HTML，將要被創建的單元格添加到表格行
// 4.創建表格行 var tr = document.createElement("tr"); // 5.添加單元格到表格行中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); -
通過JavaScript：獲取表格對象，將定義好的表格行，添加到表格中
// 6.獲取table var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); -
通過JavaScript：定義刪除表格行信息的方法
// 刪除方法 function delTr(obj) { // 獲取table節點 var table = obj.parentNode.parentNode.parentNode; // 獲取te節點 var tr = obj.parentNode.parentNode; // 刪除（並返回）當前節點的指定子節點。 table.removeChild(tr); }
具體實現代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<!-- 創建一個div塊標簽，在該塊標簽中添加三個輸入信息（編號、姓名、性別）的框框、一個確認添加的按鈕（添加）-->
<div>
<input type="text" id="id" placeholder="請輸入編號">
<input type="text" id="name" placeholder="請輸入姓名">
<input type="text" id="gender" placeholder="請輸入性別">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<!-- 表格標題 -->
<caption>學生信息表</caption>
<!-- 表格第一行：表格表頭 -->
<tr>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
<th>操作</th>
</tr>
<!-- 表格第二行：學生信息2 -->
<tr>
<td>1</td>
<td>令狐沖</td>
<td>男</td>
<!-- 在該單元格中創建一個鏈接標簽，void運算符來阻止href返回值，通過onclick事件(鼠標點擊)屬性來刪除信息行-->
<td><a href="javascript:void(0);" onclick="deleteTr(this);">刪除</a></td>
</tr>
<!-- 表格第三行：學生信息2 -->
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<!-- 在該單元格中創建一個鏈接標簽，void運算符來阻止href返回值，通過onclick事件(鼠標點擊)屬性來刪除信息行-->
<td><a href="javascript:void(0);" onclick="deleteTr(this);">刪除</a></td>
</tr>
<!-- 表格第四行：學生信息3 -->
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<!-- 在該單元格中創建一個鏈接標簽，void運算符來阻止href返回值，通過onclick事件(鼠標點擊)屬性來刪除信息行-->
<td><a href="javascript:void(0);" onclick="deleteTr(this);" >刪除</a></td>
</tr>
</table>
<script>
// 1.獲取按鈕
var btn_add = document.getElementById("btn_add");
btn_add.onclick = function() {
// 2.1 獲取文本框對象
var idObject = document.getElementById("id");
var nameObject = document.getElementById("name");
var genderObject = document.getElementById("gender");
// 2.2 獲取文本框的內容
var id = idObject.value;
var name = nameObject.value;
var gender = genderObject.value;
//3.創建單元格，賦值單元格的標簽體
// id 的 單元格
var td_id = document.createElement("td"); // 創建單元格
var text_id = document.createTextNode(id); // 賦值給單元格的標簽體
td_id.appendChild(text_id);
// name 的 單元格
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//gender 的 單元格
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
// a標簽的單元格
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0);");
ele_a.setAttribute("onclick","delTr(this);");
var text_a = document.createTextNode("刪除");
ele_a.appendChild(text_a); // 為a標簽寫入文本內容："刪除"
td_a.appendChild(ele_a); // 為td標簽添加子標簽（a標簽）
// 4.創建表格行
var tr = document.createElement("tr");
// 5.添加單元格到表格行中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
// 6.獲取table
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
};
// 刪除方法
function deleteTr(object) {
// 獲取table節點
var table = object.parentNode.parentNode.parentNode;
// 獲取te節點
var tr = object.parentNode.parentNode;
// 刪除（並返回）當前節點的指定子節點。
table.removeChild(tr);
}
</script>
</body>
</html>
最終效果如下：可以刪除信息，也可以添加信息
也可以使用innerHTML進行添加數據，步驟類似上面所述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<!-- 創建一個div塊標簽，在該塊標簽中添加三個輸入信息（編號、姓名、性別）的框框、一個確認添加的按鈕（添加）-->
<div>
<input type="text" id="id" placeholder="請輸入編號">
<input type="text" id="name" placeholder="請輸入姓名">
<input type="text" id="gender" placeholder="請輸入性別">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<!-- 表格標題 -->
<caption>學生信息表</caption>
<!-- 表格第一行：表格表頭 -->
<tr>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
<th>操作</th>
</tr>
<!-- 表格第二行：學生信息2 -->
<tr>
<td>1</td>
<td>令狐沖</td>
<td>男</td>
<!-- 在該單元格中創建一個鏈接標簽，void運算符來阻止href返回值，通過onclick事件(鼠標點擊)屬性來刪除信息行-->
<td><a href="javascript:void(0);" onclick="deleteTr(this);">刪除</a></td>
</tr>
<!-- 表格第三行：學生信息2 -->
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<!-- 在該單元格中創建一個鏈接標簽，void運算符來阻止href返回值，通過onclick事件(鼠標點擊)屬性來刪除信息行-->
<td><a href="javascript:void(0);" onclick="deleteTr(this);">刪除</a></td>
</tr>
<!-- 表格第四行：學生信息3 -->
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<!-- 在該單元格中創建一個鏈接標簽，void運算符來阻止href返回值，通過onclick事件(鼠標點擊)屬性來刪除信息行-->
<td><a href="javascript:void(0);" onclick="deleteTr(this);" >刪除</a></td>
</tr>
</table>
<script>
// 使用innerHTML添加
document.getElementById("btn_add").onclick = function() {
// 獲取文本框的內容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
// 獲取table
var table = document.getElementsByTagName("table")[0];
// 追加一行
table.innerHTML += "<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >刪除</a></td>\n" +
" </tr>";
};
// 刪除方法
function deleteTr(object) {
// 獲取table節點
var table = object.parentNode.parentNode.parentNode;
// 獲取te節點
var tr = object.parentNode.parentNode;
// 刪除（並返回）當前節點的指定子節點。
table.removeChild(tr);
}
</script>
</body>
</html>