原生JS关于表单的增删查

最新推荐文章于 2024-05-16 16:52:30 发布

置顶 Adasunshine

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量863

点赞数 2

文章标签： js表单 js表单增删查

本文链接：https://blog.csdn.net/FormAda/article/details/80420661

版权

一、增添元素

在增添元素的时候，我们可以考虑到节点的方式来增添：

1.创建一个新的元素

2.输入新建元素的内容

3.向已有元素追加新元素

有了这三点之后呢你便可以增添一个新元素了，快试试吧！

e.g：

二、删除元素

当然，在我们删除某一个选定的元素的时候，我们还是会用到节点，在此就要好好缕一缕子节点和父节点之间的关系了。

在这里，针对于未来事件，其实还有一个方法是可以用的，就是事件委托，但是便于理解，就先看看父子节点的用法吧！

1.写出删除子节点的函数

2.创建一个便于触发事件的函数

首先创建一个自命名的删除函数，设置一个形参在小括号内，因为是要删除table中的tr，但是点击的按钮只能位于某一个tr的td中，所以首先要找到点击按钮的父元素的父元素的父元素，也就是table,然后来删除table中的某个指定的tr（也就是oThis.parentNode.parentNode）,这样一个删除函数就写好了，然后再在input中设置οnclick="del(this)"就好了。

三、保存（查找）元素

1.编写函数

首先，我们要编写一个自命名的函数，然后用alert弹出弹框来显示信息，那么怎么获取表单的文本内容呢？一起来看看吧！

2.利用节点来获取文本value

先来看一段代码吧：

一般我们要获取input文本的内容，都会先在input中加一个id，例如id="aaa",然后在js中获取input的id var one=document.getElementById("aaa");

然后在用one.value获取文本内容。但是此时我们面临的是一个未来元素，它需要动态的操作，用id的办法很难实现。这时候，我们可以仿照上面的删除，运用父子节点来进行获取。

下面是整个代码，大家可以进行参考：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单操作</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
input[type=text]{
width: 90%;
border: 1px solid #FFFFFF;
outline: none;
text-align: center;
}
.head{
width: 80%;
height: 50px;
background: #E7E7E7;
margin: 0 auto;
border: 1px solid #C6C6C6;
margin-bottom: 5px;

}
table{
margin-top: 45px;
margin: 0 auto;

}
#insert{
width: 60px;
height: 30px;
}
input[type=button]{
float: left;
width: 80%;
height: 25px;
outline: none;
border-radius: 5px;
background: whitesmoke;
margin-left: 10px;
margin-right: 10px;
margin-top: 2px;
margin-bottom: 2px;

}
td{
text-align: center;
}
#baocun{
position: absolute;
left: 88%;
}
.one{
width: 10%;
height: 20px;
}
</style>
</head>
<body style="position: relative;">
<div class="nav">
<div class="head">
<input type="button" value="增添成员" id="insert" class="classB" style="position: absolute; left: 70%; top:12px;">
</div>
<table border="1" cellspacing="0" align="center" width="60%" height="50%" id="table">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>科目</th>
<th class="one">请选择</th>
</tr>
</table>
<script type="text/javascript">
function byId(id){
return typeof(id) === "string"?document.getElementById(id):id;
}
//定义一个有初始值的数组
var data=[
{'name':'林佳佳','sex':'女','age':'23','clas':'语文',},
{'name':'张约翰','sex':'男','age':'36','clas':'数学',},
{'name':'李林杰','sex':'男','age':'29','clas':'物理',},
{'name':'华振','sex':'男','age':'43','clas':'化学',},
{'name':'朱琳','sex':'女','age':'27','clas':'英语',},
];
var oTable=byId("table"),
oTr=oTable.getElementsByTagName("tr"),
oTd=oTable.getElementsByTagName("td"),
oIns=byId("insert");

//给表单赋初始值
for(var i=0; i<data.length; i++){
var oTr=document.createElement("tr");

var oTd=document.createElement("td");
oTd.innerHTML = "<input type='text' value="+data[i].name+">";
oTr.appendChild(oTd);
var oTd=document.createElement("td");
oTd.innerHTML = "<input type='text' value="+data[i].sex+">";
oTr.appendChild(oTd);
var oTd=document.createElement("td");
oTd.innerHTML = "<input type='text' value="+data[i].age+">";
oTr.appendChild(oTd);
var oTd=document.createElement("td");
oTd.innerHTML = "<input type='text' value="+data[i].clas+">";
oTr.appendChild(oTd);
var oTd=document.createElement("td");
oTd.innerHTML = '<input type="button" value="保存" οnclick="save(this)">'+'<input type="button" value="删除" οnclick="del(this)">';
oTr.appendChild(oTd);
oTable.appendChild(oTr);
}
//点击增加按钮增加一行
oIns.οnclick=function(){
var oTr=document.createElement("tr");
oTr.id="data"+i;
var oTd=document.createElement("td");
oTd.innerHTML = "<input type='text' placeholder='请输入姓名'>";
oTr.appendChild(oTd);
var oTd=document.createElement("td");
oTd.innerHTML = "<input type='text' placeholder='请输入性别'>";
oTr.appendChild(oTd);
var oTd=document.createElement("td");
oTd.innerHTML = "<input type='text' placeholder='请输入年龄'>";
oTr.appendChild(oTd);
var oTd=document.createElement("td");
oTd.innerHTML = "<input type='text' placeholder='请输入科目'>";
oTr.appendChild(oTd);
var oTd=document.createElement("td");
oTd.innerHTML = '<input type="button" value="保存" οnclick="save(this)">'+'<input type="button" value="删除" οnclick="del(this)">';
oTr.appendChild(oTd);
oTable.appendChild(oTr);
}
//点击删除按钮删除当前行
function del(oThis){
oThis.parentNode.parentNode.parentNode.removeChild(oThis.parentNode.parentNode);
}
//点击保存获取信息
function save(oThis){
alert("姓名："+oThis.parentNode.parentNode.childNodes[0].childNodes[0].value+"， "
+"性别："+oThis.parentNode.parentNode.childNodes[1].childNodes[0].value+"， "
+"年龄："+oThis.parentNode.parentNode.childNodes[2].childNodes[0].value+"， "
+"科目："+oThis.parentNode.parentNode.childNodes[3].childNodes[0].value);
}
</script>
</div>
</body>