一、增添元素
在增添元素的时候,我们可以考虑到节点的方式来增添:
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>
</html>
以上仅供参考!