文章目录
简单表单
先用一个简单的表格来练练手。
HTML部分代码
<body>
<label>姓名：</label>
<input type="text" name="name" placeholder="请输入姓名">
<br>
<span>年龄：</span>
<input type="text" name="age" placeholder="请输入年龄">
<button onclick="add1()">添加</button><br>
<span>姓名：</span>
<input type="text" name="username" placeholder="请输入需要查询的姓名">
<button>查询</button><br>
<br>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
现在我们需要进行表格中数据的增删改查部分代码的书写了，首先肯定需要先完成增加数据的功能，其次完成删除和查询数据功能，因为修改数据稍微复杂些，所以将修改数据放到最后完成。
添加数据
先理清我们需要做什么？
- 获取填写的姓名和年龄，并生成一个 id
- 在表格中添加一行来保存 id 和填写的姓名、年龄
1. 获取填写的数据
使用 document 对象的方法可以获取到填写的数据，这里我用的是getElementsByTagName方法根据标签名来获取对象，也可以用其他的获取元素的方法。
var id = 1;
function add1() {
// 获取填写的数据
var inputLables = document.getElementsByTagName("input");
var name = inputLables[0].value;
var age = inputLables[1].value;
// 简单数据校验
if (name=="" || age=="") {
alert("请正确输入");
return;
}
}
2. 添加数据
获取到了填写的数据之后，需要在表格中添加一行，来存储这些数据，这需要添加 tr 标签和 td 标签，那么怎么来添加这些标签呢？
方法1：拼接字符串
最简单易懂的方法就是拼接字符串(添加操作的万金油)，我们可以使用document的方法获取到 table 标签中的 tbody 标签，然后用innerHTML属性获取到当前 tbody 标签中的文本，在它的后面拼接上HTML语句。
function add1() {
// 获取填写的数据
var inputLables = document.getElementsByTagName("input");
var name = inputLables[0].value;
var age = inputLables[1].value;
// 简单数据校验
if (name=="" || age=="") {
alert("请正确输入");
return;
}
// 字符串拼接
var str1 = "" +
"<tr>" +
"<td>" + (++id) + "</td>" +
"<td>" + name + "</td>" +
"<td>" + age + "</td>" +
"<td>" +
"<a href='javascript:;'>删除</a>" +
" <a href='javascript:;'>修改</a>" +
"</td>" +
"</tr>";
var obj = document.getElementsByTagName("tbody")[0];
obj.innerHTML += str1;
}
<a href='javascript:;'>删除</a>可以看到这里 a 标签的 href 属性中使用的不是地址，而是JavaScript代码，而使用JavaScript代码是空语句，这样会使得 a 标签在点击时之后不会发生任何事情。
方法2：DOM操作
function add2() {
// 获取元素
var inputLabels = document.getElementsByTagName("input");
var name = inputLabels[0].value;
var age = inputLabels[1].value;
// 简单校验
if (name == "" || age == "") {
alert("请正确输入");
return;
}
var new_tr;
var new_td;
new_tr = document.createElement("tr"); // 创建 tr 标签
new_td = document.createElement("td"); // 创建 td 标签
new_td.innerHTML = ++id; // 将 id 添加到标签中
new_tr.appendChild(new_td); // 将 td 标签添加到 tr 标签中
new_td = document.createElement("td"); // 创建 td 标签
new_td.innerHTML=name; // 将获取的 name 添加到标签中
new_tr.appendChild(new_td); // 将 td 标签添加到 tr 标签中
new_td = document.createElement("td"); // 创建 td 标签
new_td.innerHTML=age; // 将获取的 age 添加到标签中
new_tr.appendChild(new_td); // 将 td 标签添加到 tr 标签中
new_td = document.createElement("td"); // 创建 td 标签
// 将获取的 删除/修改 添加到标签中
new_td.innerHTML="<a href='javascript:delete1();'>删除</a>" +
" <a href='javascript:update1();'>修改</a>";
new_tr.appendChild(new_td); // 将 td 标签添加到 tr 标签中
// 将 tr 标签添加到 tbody 标签中
document.getElementsByTagName("tbody")[0].appendChild(new_tr);
}
方法三：前两种方法的组合
function add3() {
var inputLabels = document.getElementsByTagName("input");
// console.log(inputLabels.length);
var name = inputLabels[0].value;
var age = inputLabels[1].value;
var new_tr = document.createElement("tr");
new_tr.innerHTML = "<td>" + (++id) + "</td>" +
"<td>" + name + "</td>" +
"<td>" + age + "</td>" +
"<td>" +
"<a href='javascript:;'>删除</a>" +
" <a href='javascript:;'>修改</a>" +
"</td>";
document.getElementsByTagName("tbody")[0].appendChild(new_tr);
}
删除数据
还是一样，在写删除功能之前，要理清实现功能的步骤
- 找到需要删除的 tr 标签
- 将找到的 tr 标签从 table 标签中删除
知道了需要怎么做之后，我们来完成删除数据的代码。
方法1：
在上面的添加数据的JavaScript代码中的删除的 a 标签中添加上一个点击事件，
new_td.innerHTML="<a href='javascript:;' οnclick=delete1(this)>删除</a>" +
" <a href='javascript:update1();'>修改</a>";
然后来实现一下delete1()方法
function delete1(obj) {
var tr = obj.parentNode.parentNode;
document.getElementsByTagName("tbody")[0].removeChild(tr);
}
这个过程中，将 a 标签作为参数传到了delete1方法中，利用标签间的关系，使用parentNode属性可以找到 a 标签的父元素—— td 标签，然后再找到 td 标签的父元素，也就是我们需要删除的 tr 标签，之后使用removeChilde()方法将这个 tr 标签从 tbody 中删除即可。
一般删除操作都会让用户确认的，所以我们加一个选择提示框。
function delete1(obj) {
var tr = obj.parentNode.parentNode;
if (confirm("是否删除该条记录?")) {
document.getElementsByTagName("tbody")[0].removeChild(tr);
}
}
这里如果不传 this 参数的话，在 delete1() 方法中使用的 this 是 window 对象，注意和方法2区分开
方法2：
方法2添加事件的方式和方法1有些区别，方法1是直接在 a 标签上使用 onclick 属性添加的事件，而方法2使用对象.事件名=方法的方式为 a 标签添加事件。
new_td.innerHTML="<a href='javascript:;'>删除</a>" +
" <a href='javascript:;'>修改</a>";
new_td.getElementsByTagName("a")[0].onclick=delete2;
注意！这里需要将 delete2 这个方法的定义赋给 onclick，所以不要给 delete2 加上()，加上()表示将 delete2 这个方法的返回值赋给 onclick ，这里和在标签中为属性赋值不同，在标签中为 onclick 属性赋值需要加上()
function delete2() {
var tr = this.parentNode.parentNode;
if (confirm("是否删除该条记录?")) {
document.getElementsByTagName("tbody")[0].removeChild(tr);
}
}
注意！这里又和方法1不同，方法1中传递了 this 参数，因为调用方法1中的delete1 方法的是window对象，而方法2中则不需要传递 this 作为参数，因为调用delete2 方法的对象是 a 标签(new_td.getElementsByTagName("a")[0])
查询数据
- 获取需要查询的姓名
- 从表格中查询数据
function select1() {
// 获取文本框中内容
var inputLabels = document.getElementsByTagName("input");
var name = inputLabels[2].value;
// 获取表格中的列
var trs = document.getElementsByTagName("tr");
var len = trs.length;
// 清除之前选中的记录的背景色
for (var i = 1; i < len; i++) {
trs[i].removeAttribute("style");
}
// 简单的校验
if (name == "") {
return;
}
// for 循环遍历
for (var i = 1; i < len; i++) {
if (name == trs[i].cells[1].innerHTML) {
// if (trs[i].cells[1].innerHTML.indexOf(name) > -1) —— 模糊查询
trs[i].style.backgroundColor = "red";
}
}
}
需要注意的点：
- for 循环的循环变量 i 是从1开始的，因为 trs[0] 是 ID、名字、年龄、操作那行；
- for 循环遍历中 if 条件里
name == trs[i].cells[1].innerHTML是全匹配，trs[i].cells[1].innerHTML.indexOf(name) > -1则是模糊匹配
修改数据
- 获取需要修改的数据；
- 修改后的保存。
获取修改前的数据，将对应的 td 标签的内容改为文本输入框以便获取修改后的数据，将操作栏中的删除、修改键改为保存键。
function update1(obj) {
var thistd = obj.parentNode;
var agetd = thistd.previousSibling;
var nametd = agetd.previousSibling;
agetd.innerHTML = "<input type='text' value='" + agetd.innerText + "'/>";
nametd.innerHTML = "<input type='text' value='" + nametd.innerText + "'/>";
thistd.innerHTML = "<a href='javascript:;'>保存</a>";
}
保存功能方法1
实现保存功能
function update1(obj) {
var thistd = obj.parentNode;
var agetd = thistd.previousSibling;
var nametd = agetd.previousSibling;
var idtd = nametd.previousSibling.innerHTML;
agetd.innerHTML = "<input type='text' id = 'ageid" + idtd + "' value='" + agetd.innerText + "'/>";
nametd.innerHTML = "<input type='text' id = 'nameid" + idtd + "'value='" + nametd.innerText + "'/>";
thistd.innerHTML = "<a href='javascript:;'>保存</a>";
thistd.childNodes[0].onclick = function() {
agetd.innerHTML = document.getElementById("ageid" + idtd).value;
nametd.innerHTML = document.getElementById("nameid" + idtd).value;
thistd.innerHTML = "<a href='javascript:;' οnclick=delete1(this)>删除</a> " +
"<a href='javascript:;' οnclick=update1(this)>修改</a>";
}
}
需要注意的是 input 标签 id 的书写，之所以需要用 ageid + 当前的id号 是因为可能在修改时同时修改多个记录时区分开不同记录。
input 标签的 id
另外，idtd 的书写一定要有 innerHTML，因为我们需要的不是 id 的这个单元格而是 id 单元格中的值，如果不加 innerHTML，在 input 标签的 id 处就会变成这样，达不到想要区分不同的 input 标签的作用。
保存功能方法2：
使用getElementsById方法需要区别开不同记录的id，除了这种方法，我们还可以使用元素关系来获取内部标签，然后获取其文本
function update2(obj) {
var thistd = obj.parentElement;
var agetd = thistd.previousSibling;
var nametd = agetd.previousSlbling;
agetd.innerHTML = "<input type='text' value='" + agetd.innerHTML + "' />";
nametd.innerHTML = "<input type='text' value='" + nametd.innerHTML + "'>";
thistd.innerHTML = "<a href='javascript:;'>保存</a>"
thistd.childNodes[0].onclick = function() {
agetd.innerHTML = agetd.childNodes[0].value;
nametd.innerHTML = nametd.childNodes[0].value;
thistd.innerHTML = "<a href='javascript:;' οnclick=delete1(this)>删除</a> " +
"<a href='javascript:;' οnclick=update1(this)>修改</a>";
}
}
复杂表单
前面我们对只有输入框的简单表单进行了处理，接下来处理复杂些的表单，如下图所示。
复杂表单和简单表单的主要区别在于添加数据上，下面来看看他们的区别。
添加数据
对比简单表单操作来看，复杂表单的难点在于获取选中的单选框、复选框、下拉框中的文本。
所以我们需要完成的步骤有
- 获取单选框、复选框、下拉框的dom对象
- 找到选中的标签的对象
- 获取选中的标签对象的文本
获取dom对象
这步比较简单，一般使用 name 属性来获取dom对象
// 获取 name 属性为 favorite 的标签对象
var obj = document.getElementsByName("favorite");
找到选中的标签的对象
想要找到选中的标签的dom对象，首先要知道被选中的标签的dom对象和没被选中的标签的dom对象有什么区别
- 单选框和复选框中，被选中的标签的dom对象的 checked 属性是 true，没被选中的标签的dom对象的 checked 属性是 false；
- 下拉框中，使用 selectedIndex 属性可以获取被选中的 option 标签的索引，使用 options 属性可以获取 select 标签下的 option 标签的对象数组。
// 复选框示例
// 获取复选框dom对象
var check1 = document.getElementsByName("favorite");
var len = check1.length;
for (var i = 0; i < len; i++) {
if (check1[i].checked) {
// 该标签是被选中的复选框标签
}
}
// 下拉框示例
// 获取下拉框dom对象
var select1 = document.getElementsByTagName("select")[0];
// 获取下拉框中被选中的 option 的索引
var index = select1.selectedIndex;
// 获取下拉框中 option 的dom对象
var optionObj = select1.options;
// 获取下拉框中被选中的 option 的dom对象
var selectedOption = optionObj[index];
获取单选框和复选框的文本
获取文本首先要明白，需要获取文本和当前单选框标签或者复选框标签之间的关系。
需要获取的文本是单选框标签或者复选框标签的兄弟标签，所以使用 nextSibling 属性和 textContent 属性获取。
<input type="checkbox" name="test1" id="" value="0" /> 篮球
<input type="checkbox" name="test1" id="" value="1" /> 游戏
<input type="checkbox" name="test1" id="" value="2" /> 音乐
<input type="checkbox" name="test1" id="" value="3" /> 其他
function test1() {
var check = document.getElementsByName("test1");
var len = check.length;
var str = "";
for (var i = 0; i < len; i++) {
if (check[i].checked) {
console.log(check[i].nextSibling.textContent)
str += check[i].nextSibling.textContent.trim() + " ";
}
}
return str;
}
如果使用了 label 标签包含 input 标签的形式，可以使用 parentNode 属性找到 label 标签，然后使用 textContent属性 获取文本
<label><input type="checkbox" name="test2" id="" value="0" /> 篮球</label>
<label><input type="checkbox" name="test2" id="" value="1" /> 游戏</label>
<label><input type="checkbox" name="test2" id="" value="2" /> 音乐</label>
<label><input type="checkbox" name="test2" id="" value="3" /> 其他</label>
function test2() {
var check = document.getElementsByName("test2");
var len = check.length;
var str = "";
for (var i = 0; i < len; i++) {
if (check[i].checked) {
str += check[i].parentNode.textContent;
}
}
// console.log(str);
return str;
}
textContent属性只获取文本，不获取标签。
1129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
