保存数据--删除
来源:互联网 发布:proteus矩阵键盘 编辑:程序博客网 时间:2024/06/08 10:25
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tr:nth-child(2n) {
background-color: aquamarine;
}
table {
width: 480px;
border: 1px solid;
}
</style>
<script>
function add() {
//创建行文本
var tr = document.createElement("tr");
//创建 姓名,年龄,生日,删除文本,得到列
var tdname = document.createElement("td");
var tdage = document.createElement("td");
var tdsr = document.createElement("td");
var tddel = document.createElement("td");
//创建删除按钮文本
var del = document.createElement("button");
//获取id的值
var xm = document.getElementById("xm");
var nl = document.getElementById("nl");
var sr = document.getElementById("sr");
//创建 姓名,年龄,生日 付给 id的值 得到列
tdname.innerText = xm.value;
tdage.innerText = nl.value;
tdsr.innerText = sr.value;
//把列添加到行
tr.appendChild(tdname);
tr.appendChild(tdage);
tr.appendChild(tdsr);
tr.appendChild(tddel);
//把删除付给按钮删除
del.innerText = "删除";
//点击删除
del.onclick = function() {
this.parentNode.parentNode.remove();
}
//把按钮添加到每一列
tddel.appendChild(del);
//把行添加到表
document.getElementById("tb").appendChild(tr);
}
</script>
</head>
<meta charset="UTF-8">
<title></title>
<style>
tr:nth-child(2n) {
background-color: aquamarine;
}
table {
width: 480px;
border: 1px solid;
}
</style>
<script>
function add() {
//创建行文本
var tr = document.createElement("tr");
//创建 姓名,年龄,生日,删除文本,得到列
var tdname = document.createElement("td");
var tdage = document.createElement("td");
var tdsr = document.createElement("td");
var tddel = document.createElement("td");
//创建删除按钮文本
var del = document.createElement("button");
//获取id的值
var xm = document.getElementById("xm");
var nl = document.getElementById("nl");
var sr = document.getElementById("sr");
//创建 姓名,年龄,生日 付给 id的值 得到列
tdname.innerText = xm.value;
tdage.innerText = nl.value;
tdsr.innerText = sr.value;
//把列添加到行
tr.appendChild(tdname);
tr.appendChild(tdage);
tr.appendChild(tdsr);
tr.appendChild(tddel);
//把删除付给按钮删除
del.innerText = "删除";
//点击删除
del.onclick = function() {
this.parentNode.parentNode.remove();
}
//把按钮添加到每一列
tddel.appendChild(del);
//把行添加到表
document.getElementById("tb").appendChild(tr);
}
</script>
</head>
<body>
<form>
姓名:<input type="text" id="xm" />年龄:<input type="text" id="nl" />生日:<input type="text" id="sr" />
<input type="button" value="添加" onclick="add()" />
</form>
<table id="tb">
<tr style="background: #999999;">
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
<td>删除</td>
</tr>
</table>
</body>
<form>
姓名:<input type="text" id="xm" />年龄:<input type="text" id="nl" />生日:<input type="text" id="sr" />
<input type="button" value="添加" onclick="add()" />
</form>
<table id="tb">
<tr style="background: #999999;">
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
<td>删除</td>
</tr>
</table>
</body>
</html>
阅读全文
0 0
- 保存数据--删除
- 保存数据——删除
- Hibernate 数据的保存,更新和删除
- Hibernate 数据的保存,更新和删除
- JavaScript 删除表格行,保存表格数据
- PB数据窗口保存前删除空行
- Mybatis3.0查询,保存,更新,删除数据。
- 删除NSUserDefault保存的所有数据
- PB数据窗口保存前删除空行
- 将数据保存到本地,APP被删除,保存数据不会被删除
- listView添加 修改 删除 保存数据到数据库操作
- Table动态增加,删除,修改行,保存数据
- winForm中DataSet实现数据查询、保存和删除
- 主题:Mybatis3.0查询,保存,更新,删除数据。
- 使用保存点恢复删除的数据 oracle数据库恢复
- grid中数据的保存,添加和删除
- Grails中数据的保存、更新和删除。
- winForm中DataSet实现数据查询、保存和删除
- SEO教程:想写出高质量文章就得掌握以下几点
- 支持向量机(SVM)--线性不可分
- SpringBoot—访问关系型数据库—SpringData JPA
- ls命令使用实例
- oracle 数据库的imp 导入覆盖 总结
- 保存数据--删除
- hdu 5437 Alisha’s Party(优先队列)
- 【Scikit-Learn 中文文档】预处理数据
- [BZOJ]4605 崂山白花蛇草水 线段树套KD-Tree
- 关键路径(AOE)—基于拓扑排序(AOV)
- Understanding the View Matrix
- [昨日实践]CentOS手工安装mysql5.7
- Java RMI入门(一)
- 支持向量机(SVM)算法在人脸识别上的应用