目錄
1，案例：元素内容體操作
1.1：案例
1.2：思考【進階+】
1，案例：元素内容體操作
1.1：案例
需求：
追加的行：末尾序号需要遞增的 如果序号以及1，2，再次追加，行序号為3
追加的頭：追加的頭部，序号必須為1
姓名和年齡必須通過輸入框輸入
Javascript知識【元素内容體實操案例】 - 分析：
關鍵點：
- 追加操作： += <tr>
- 輸入框彈出兩次分别接受姓名和年齡
步驟：
一、為按鈕點選onclick點選事件
二、編寫點選事件的監聽器
//1、擷取表格對象
//2、通過輸入框，擷取姓名和年齡
//3、拼接要追加的字元串，序号從3開始自增
//4、将整理好的字元串 追加到表格内容體末尾
- 代碼實作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
tr{
text-align: center;
}
</style>
<script>
var num = 3;
//向表格末尾追加資料
function addDataToLast() {
//1、擷取表格對象
var t1 = document.getElementById("t1");
//2、通過輸入框，擷取姓名和年齡
var name = prompt("請輸入姓名：");
var age = prompt("請輸入年齡：");
//3、拼接要追加的字元串，序号從3開始自增
var str = "<tr>\n" +
" <td>"+ num++ +"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+age+"</td>\n" +
" </tr>";
//4、将整理好的字元串 追加到表格内容體末尾
t1.innerHTML+=str;
}
</script>
</head>
<body>
<!--
追加的行：末尾序号需要遞增的 如果序号已經有1、2，再次追加，行序号為3
追加的頭：追加的頭部，序号必須為1
姓名和年齡必須通過輸入框輸入
-->
<input type="button" value="點我向末尾追加一行" onclick="addDataToLast()"/>
<input type="button" value="思考：點我向頭部追加一行"/>
<table id="t1" style="width:500px;background-color: pink;border:1px dashed blue;">
<caption>
内容體表格
</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>1</td>
<td>XXX</td>
<td>19</td>
</tr>
<tr>
<td>2</td>
<td>XXX</td>
<td>19</td>
</tr>
</table>
</body>
</html>
|
1.2：思考【進階+】
Javascript知識【元素内容體實操案例】 - 分析：
關鍵點:
- 頭部内容體追加：
元素.innerHTML = "字元串"+元素.innerHTML;
- 擷取指定标簽的元素數組:
//根據标簽名擷取指定的元素 數組。 擷取不到。傳回空數組
var arr = document.getElementsByTagName("标簽名");
進行行下的單元格操作
Javascript知識【元素内容體實操案例】 步驟：
//1、擷取表格對象
//2、輸入姓名和年齡
//3、定義字元串str，作為表格的新内容體
//4、str拼接表格的頭部和表頭
//5、向str中，拼接一條新行資料（序号必須為1）
//6、擷取所有的tr标簽
//7、周遊所有tr标簽，索引從1
//8、周遊中，取出目前tr，修改目前tr第一個單元格資料，在原有基礎上+1
//9、修改完成，将該tr的内容體追加到str末位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
tr{
text-align: center;
}
</style>
<script>
var num = 3;
//向表格末尾追加資料
function addDataToLast() {
//1、擷取表格對象
var t1 = document.getElementById("t1");
//2、通過輸入框，擷取姓名和年齡
var name = prompt("請輸入姓名：");
var age = prompt("請輸入年齡：");
//3、拼接要追加的字元串，序号從3開始自增
var str = "<tr>\n" +
" <td>"+ num++ +"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+age+"</td>\n" +
" </tr>";
//4、将整理好的字元串 追加到表格内容體末尾
t1.innerHTML+=str;
}
//向表格頭部追加資料
function addDataToFirst() {
//1、擷取表格對象
var t1 = document.getElementById("t1");
//2、輸入姓名和年齡
var name = prompt("請輸入姓名：");
var age = prompt("請輸入年齡：");
//3、定義字元串str，作為表格的新内容體
var str = "";
//4、str拼接表格的頭部和表頭
str+="<caption>\n" +
" 内容體表格\n" +
" </caption>\n" +
" <tr>\n" +
" <th>序号</th>\n" +
" <th>姓名</th>\n" +
" <th>年齡</th>\n" +
" </tr>";
//5、向str中，拼接一條新行資料（序号必須為1）
str+="<tr>\n" +
" <td>1</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+age+"</td>\n" +
" </tr>";
//6、擷取所有的tr标簽
var trArr = document.getElementsByTagName("tr");
//7、周遊所有tr标簽，索引從1
for (var i = 1; i <trArr.length ; i++) {
//8、周遊中，取出目前tr，修改目前tr第一個單元格資料，在原有基礎上+1
var td = trArr[i].cells[0];
td.innerHTML = parseInt(td.innerHTML)+1;
//9、修改完成，将該tr的内容體追加到str末位
str+="<tr>"+trArr[i].innerHTML+"</tr>";
}
//10、為表格内容體設定新資料為str
t1.innerHTML = str;
num++;//隻要加一行，num一定要++
}
</script>
</head>
<body>
<!--
追加的行：末尾序号需要遞增的 如果序号已經有1、2，再次追加，行序号為3
追加的頭：追加的頭部，序号必須為1
姓名和年齡必須通過輸入框輸入
-->
<input type="button" value="點我向末尾追加一行" onclick="addDataToLast()"/>
<input type="button" value="思考：點我向頭部追加一行" onclick="addDataToFirst()"/>
<table id="t1" style="width:500px;background-color: pink;border:1px dashed blue;">
<caption>
内容體表格
</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>1</td>
<td>XXX</td>
<td>19</td>
</tr>
<tr>
<td>2</td>
<td>XXX</td>
<td>19</td>
</tr>
</table>
</body>
</html>
|
