需求:
- 使用CSS:当鼠标移入时,该行的背景颜色为黄色,当鼠标移出时,该行的背景颜色还原;
- 当添加按钮“添加一行数据”时,文本框中的数据添加到表格中且文本框置空;
- 当点击表格中的“删除”时,该行数据被删除,删除前确认
实现效果:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
th {
background-color: rgb(255, 231, 147);
}
hr {
width: 520px;
}
tr:hover {
background-color: yellow;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" align="center" width="500" id="info">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
</table>
<hr>
<div style="text-align: center;">
学号:<input type="text" placeholder="请输入你的学号" id="number">
姓名:<input type="text" placeholder="请输入你的姓名" id="name">
<input type="button" value="添加" id="number" onclick="add()">
</div>
</body>
<script>
/*
思路:
添加点击事件
获取输入文本框的内容
将输入框的内容追加到表格里面去 作为新的一行
table的子元素是tr tr的子元素是td 我们元素是放到td里面 所以要有tr td元素标签
创建tr 和 td
*/
var infoObj = document.getElementById("info");
var numberObj = document.getElementById("number");
var nameObj = document.getElementById("name");
function add() {
// 创建tr 和 td
var tr = document.createElement("tr");
// 追加3列内容
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
td1.innerHTML = numberObj.value;;
td2.innerHTML = nameObj.value;
td3.innerHTML = "<a href='#' οnclick='remove(this)'>删除</a>"
/*把td挂载到tr树上面*/
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
/*把tr添加到table树*/
infoObj.appendChild(tr);
}
/*根据点击的a标签找到对应的父标签(td)再找到对应的父标签(tr)*/
// 本来括号里面要写this的 但是this名字和function函数本身自带的this同名
// 所以换一个名 用that可以 这个that没有任何含义 只是一个元素的名字 用任何名字都可以 自己想一个名字就行
function remove(that) {
that.parentNode.parentNode.remove();
}
</script>
</html>
细节考究
tr:hover(伪类选择器):
是指当鼠标指针悬停在表格行(tr)上时,会触发某些特定的样式或行为
例如:
cellspacing=“0”:
表示表格中单元格之间的空白量为0
align=“center:”
表示表格的对齐格式为置中
placeholder :
方框里面的默认值或提示语
例如:
学号:<input type="text" placeholder="请输入你的学号" id="number">
document.createElement(“标签名”):
创建一个元素
document.createElement(“td”) 创建的是一个 元素,也就是表格的一个单元格。
document.createElement(“th”) 创建的是一个 元素,也就是表格的头部单元格。
这两种元素有一些不同的属性,比如 元素默认会被加粗和居中显示,而 元素则不会
修改DOM树的方法:
将元素挂到DOM树上的方法 | 作用 |
---|---|
父元素.appendChild(子元素) | 父元素是DOM树中已经存在元素 子元素是新创建的元素,把创建好的子元素挂到DOM树上,做为父元素的子元素。 |
父元素.removeChild(子元素) | 将DOM树上某个元素的子元素删除 |
元素.remove() | 自己删除本身这个元素 |
关于代码中的 tr.appendChild(td1) 和 td.appendChild(td1);这两句有啥区别,为什么第二句不行
tr.appendChild(td1): 的意思是将刚刚创建的 元素(td1) 添加到 元素中。
这样, 元素就成为了 元素的一个子元素,也就是说, 元素被嵌套在了 元素中。
不能用 td.appendChild(td1); 这种表述
td.appendChild(td1):的意思是将刚刚创建的 元素(td1) 添加到 元素中,
但是,这是不正确的操作
,因为 元素是一个表格的单元格,它本身不应该再包含其他的单元格或者头部单元格。
关于表格:
td: :“table data” 表示表格中的一个单元格,是表格中存储和展示具体数据的地方
th: :“table header” ,表示表格的头部单元格,通常用于显示列的标题或者说明。与 td 元素不同的是,th 元素默认会被加粗和居中显示
tr: : “table row”,表示表格中的一行。一个 tr 元素可以包含多个 td 或 th 元素,表示一行中的各个单元格