【前言】
最近教学生用JS手写一个表格的增删改查，发现一些学生共性问题，这里简单总结下，希望有所帮助。
【主体】
问题比较多，这里大概列举几个常见的
（1）获取表单值写到了点击事件外部，导致点击按钮时获取不到表单输入值
解析：如果写到了外部，name获取到的会是初始化页面时的表单值--→即空。所以必须写到点击事件内部才能获取点击时的当前表单值。
（2）实现全选全不选
var checkBoxs = document.getElementsByName("del");
var status = me.checked;
for (var i = 0; i < checkBoxs.length; i++) {
checkBoxs[i].checked = status;
}
（3）添加元素节点appendChild()
（4）删除节点removeChild()
（5）创建元素节点creatElement
（6）创建文本节点createTextNode
（7）同时删除多个时，普通的遍历方式删除表格会导致全选后删除失败，遗漏多行删除不了（因为每删除一个会导致表格行数改变）
1、错误方法：
var delAll = document.getElementsByName("del");
var delTr,delTb;
for (var i = 0; i < delAll.length; i++) {
if(delAll[i].checked == true){
delTr = delAll[i].parentNode.parentNode;
delTb = delTr.parentNode;
delTb.removeChild(delTr);
}
}
原因分析：这样写存在一个问题，当第一行被删除时，表格的结构发生了变化，以前的第i+1行变成了现在的第i行，所以按照这种写法无法遍历删除所以选中的行。 正确的写法应该从最大的行号开始删除，这样第i+1行被删除后不会影响第i行在表格中的行号。
2、修改后的方法
var delAll = document.getElementsByName("del");
var delTr,delTb;
for (var i = delAll.length-1; i >= 0 ; i--) {
if(delAll[i].checked == true){
delTr = delAll[i].parentNode.parentNode;
delTb = delTr.parentNode;
delTb.removeChild(delTr);
}
}
3、修改优化后的方法
除了上面的方法，还有另一种就是在每次循环完毕后，执行一次 i--
var delAll = document.getElementsByName("del");
var delTr,delTb;
for (var i = 0; i < delAll.length ; i++) {
if(delAll[i].checked == true){
delTr = delAll[i].parentNode.parentNode;
delTb = delTr.parentNode;
delTb.removeChild(delTr);
i--;
}
}
（8）获取子节点
有多种方法获取，例如children()和childNodes
注意：使用childNodes获取子节点的时候，childNodes返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。为了不显示不必须的换行的空格，我们如果要使用childNodes就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。下面是过滤
//去掉换行的空格
for(var i=0; i<b.length;i++){
if(b[i].nodeName == "#text" && !/\s/.test(b.nodeValue)){
document.getElementById("test").removeChild(b[i]);
}
}
推荐：通过children来获取子节点。利用children来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。
var getFirstChild = document.getElementById("test").children[0];
（9）rowIndex 属性返回某一行在表格的行集合中的位置，返回<tr></tr>在表格中的位置
最后直接上代码，直接复制粘贴即可查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS增删改查表格</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.control{
width: 600px;
margin: 10px auto;
height: 30px;
text-align: center;
}
table{
width: 600px;
margin: 10px auto;
text-align: center;
}
#tableArea tr td a{
display: inline-block;
margin: 0 3px;
}
form{
width: 600px;
margin: 10px auto;
border: 1px solid black;
padding: 20px;
box-sizing: border-box;
}
/*修改区域*/
.changeArea{
width: 60%;
height: 300px;
box-shadow: 6px 6px 3px rgba(0,0,0,0.6);
position: fixed;
top: 100px;
left: 20%;
background-color: rgba(32,42,58,0.6);
border-radius: 10px;
display: none;
}
.mainArea{
width: 100%;
height: 100%;
position: relative;
padding: 30px;
box-sizing: border-box;
}
.closeArea{
width: 30px;
position: absolute;
right: 0px;
top: 0px;
height: 30px;
font-size: 21px;
background: transparent;
border: none;
color: white;
cursor: pointer;
border-top-right-radius: 10px;
outline: none;
}
.closeArea:hover{
background:rgba(255,0,0,0.6);
}
</style>
</head>
<body>
<div class="control">
<button onclick="delAll()">全部删除</button>
</div>
<table border="1" cellspacing="0" id="tableArea">
<tr>
<th><input type="checkbox" name="delAll" onchange="checkAll(this)"></th>
<th>班级</th>
<th>姓名</th>
<th>分数</th>
<th>生日</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="del"></td>
<td>1班</td>
<td>路飞</td>
<td>100</td>
<td>2018-09-10</td>
<td>
<a href="javascript:;" onclick="del(this)">删除</a><a href="javascript:;" onclick="change(this)">修改</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="del"></td>
<td>2班</td>
<td>索隆</td>
<td>90</td>
<td>2017-01-18</td>
<td>
<a href="javascript:;" onclick="del(this)">删除</a><a href="javascript:;" onclick="change(this)">修改</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="del"></td>
<td>3班</td>
<td>娜美</td>
<td>98</td>
<td>2016-07-01</td>
<td>
<a href="javascript:;" onclick="del(this)">删除</a><a href="javascript:;" onclick="change(this)">修改</a>
</td>
</tr>
</table>
<form>
班级：<input type="number" id="grade" name=""><br>
姓名：<input id="name" type="text" name="name" value=""><br>
分数：<input id="math" type="number" name=""><br>
生日：<input id="bir" type="date" name=""><br>
<button type="button" onclick="sub()">提交</button>
</form>
<div class="changeArea">
<div class="mainArea">
<button class="closeArea" onclick="closeArea()">x</button>
班级：<input type="number" id="grade1" name=""><br>
姓名：<input id="name1" type="text" name="name" value=""><br>
分数：<input id="math1" type="number" name=""><br>
生日：<input id="bir1" type="date" name=""><br>
<button type="button" onclick="update()">更新</button>
</div>
</div>
<script type="text/javascript">
// 全选全不选
function checkAll(me){
var checkBoxs = document.getElementsByName("del");
var status = me.checked;
for (var i = 0; i < checkBoxs.length; i++) {
checkBoxs[i].checked = status;
}
}
// 多个删除
function delAll(){
var delAll = document.getElementsByName("del");
var delTr,delTb;
for (var i = delAll.length-1; i >= 0 ; i--) {
// console.log(delAll)
if(delAll[i].checked == true){
delTr = delAll[i].parentNode.parentNode;
// console.log(delTr)
delTb = delTr.parentNode;
delTb.removeChild(delTr);
// i--;
// alert(delAll.length)
}
}
document.getElementsByName("delAll")[0].checked = false;
}
// 单个删除
function del(me){
var delTr = me.parentNode.parentNode;
var delTb = delTr.parentNode;
delTb.removeChild(delTr);
}
// 表单提交添加
function sub(){
var grade = document.getElementById("grade").value;//班级
var name = document.getElementById('name').value;//姓名
var math = document.getElementById("math").value;//分数
var bir = document.getElementById("bir").value;//生日
var addTr = document.createElement("tr");//添加行
// 多选框
var addTd1 = document.createElement("td"); //添加单元格
var addInput = document.createElement("input"); //添加删除多选框
addInput.setAttribute("type","checkbox");//添加属性type
addInput.setAttribute("name","del");//添加属性name
addTd1.appendChild(addInput);
//班级
var addTd2 = document.createElement("td"); //添加单元格
addTd2.innerHTML = grade + "班";
//姓名
var addTd3 = document.createElement("td"); //添加单元格
addTd3.innerHTML = name;
//分数
var addTd4 = document.createElement("td"); //添加单元格
addTd4.innerHTML = math;
//生日
var addTd5 = document.createElement("td"); //添加单元格
addTd5.innerHTML = bir;
//删除
var addTd6 = document.createElement("td"); //添加单元格
var addBt1 = document.createElement("a"); //添加删除按钮链接
addBt1.setAttribute("href","javascript:;");
addBt1.setAttribute("onclick","del(this)");
// addBt1.setAttribute("style","margin:0 4px");
addBt1.innerHTML = "删除";
addTd6.appendChild(addBt1);
var addBt2 = document.createElement("a"); //添加修改按钮链接
addBt2.setAttribute("href","javascript:;");
addBt2.setAttribute("onclick","change(this)");
addBt2.innerHTML = "修改";
addTd6.appendChild(addBt2);
//整行添加
addTr.appendChild(addTd1);
addTr.appendChild(addTd2);
addTr.appendChild(addTd3);
addTr.appendChild(addTd4);
addTr.appendChild(addTd5);
addTr.appendChild(addTd6);
var tableArea = document.getElementById("tableArea");
tableArea.appendChild(addTr);
// 清空表单
var formInfo = document.getElementsByTagName("form")[0];
formInfo.reset();
}
//修改
var checkTr;
function change(me){
var changeArea = document.getElementsByClassName("changeArea")[0];
changeArea.style.display = "block";
//数据填充
checkTr = me.parentNode.parentNode;
var grade1 = document.getElementById("grade1");
var name1 = document.getElementById("name1");
var math1 = document.getElementById("math1");
var bir1 = document.getElementById("bir1");
grade1.value = parseInt(checkTr.children[1].innerHTML);
name1.value = checkTr.children[2].innerHTML;
math1.value = checkTr.children[3].innerHTML;
bir1.value = checkTr.children[4].innerHTML;
}
//关闭弹框
function closeArea(){
// alert(9)
var changeArea = document.getElementsByClassName("changeArea")[0];
changeArea.style.display = "none";
}
//提交更新
function update(){
var grade1 = document.getElementById("grade1");
var name1 = document.getElementById("name1");
var math1 = document.getElementById("math1");
var bir1 = document.getElementById("bir1");
checkTr.children[1].innerHTML = grade1.value;
checkTr.children[2].innerHTML = name1.value;
checkTr.children[3].innerHTML = math1.value;
checkTr.children[4].innerHTML = bir1.value;
closeArea();
}
</script>
</body>
</html>
先总结到这里，如有误解敬请指正。
.
分享到：
相关推荐
3. `services.js`：可能包含一个或多个服务，用于封装与后端API的交互，实现数据的增删改查操作。 4. `directives.js`：可能包含自定义指令，用于扩展AngularJS的功能，例如验证输入或创建复杂的UI组件。 5. `...
在这个“easyui 表格增删改查工具类”中，我们可以期待找到一些实用的代码示例和辅助函数，帮助开发者实现数据的增、删、改、查操作。这些工具类通常会封装对 EasyUI 表格的初始化、数据加载、事件绑定等操作，使得...
为了实现增删改查功能，我们需要定义相应的JavaScript函数。例如，`addRow()`用于添加新数据，`deleteRow(index)`用于删除指定索引的数据，`editRow(index)`用于编辑指定索引的数据。在编辑操作中，我们可以弹出一个...
在HTML中，增删改查通常指的是对网页上动态数据的管理，虽然HTML本身不具备动态功能，但可以通过与其他技术如JavaScript、AJAX或服务器端语言（如PHP、Python等）结合来实现。下面将详细介绍这些概念： **增（Add）...
本教程将重点讲解如何使用Visual Studio Code（简称Vs Code）这个强大的代码编辑器来实现Vue项目中的增删改查功能。首先，我们来看看Vue的基本概念。 Vue.js是尤雨溪开发的一个渐进式JavaScript框架，它具有轻量级...
在这个系统中，JS可能用于实现增删改查的逻辑，如添加新工人信息，删除选定的工人，修改现有信息，并在前端即时反馈这些变化。 4. jQuery库：jQuery是一个广泛使用的JS库，简化了DOM操作、事件处理和动画等功能。在...
"增删改查"是任何数据管理系统的基石。在React中，我们可以使用事件处理函数来触发这些操作。例如，当用户点击“添加”按钮时，一个handleAdd函数会被调用，负责收集表单数据并将其添加到数据列表中。同样，对于删除...
综上所述，"bootstrap增删改查页面"的实现涵盖了Bootstrap的响应式布局、组件库、表单和表格设计、用户交互以及性能优化等多个方面，通过熟练运用这些知识点，可以构建出功能齐全、美观且易用的数据管理界面。
在本项目中，LayUI用于构建用户界面，提供表格、按钮、表单等元素，使得用户能够直观地进行学生信息的增删改查操作。LayUI的响应式设计也确保了在不同设备上的良好用户体验。 **Thymeleaf** Thymeleaf是一个现代...
项目完成后，用户可以在浏览器中看到一个带有搜索、排序功能的表格，通过jQuery实现的增删改查按钮，可以无刷新地对数据进行操作，同时Bootstrap的反馈提示和验证也能提升用户体验。 总的来说，这个项目是一个典型...
这个DEMO是针对GWT的增删改查功能的一个实例，非常适合初学者进行学习和实践。 在Web应用开发中，增删改查（CRUD，Create、Read、Update、Delete）是最基本的操作，几乎所有的数据管理界面都会涉及到这些功能。GWT...
数据库部分：创建表、增删改查语句的书写等。 前端部分：HTML、CSS、jQuery、JavaScript等。 编码顺序 添加项目需要使用的各种jar包 HTML 页面表单的编写 Apache方法的DBUtils编写 实体类的数据初始化（添加私有...
fsLayuiPlugin是一款专为layui框架设计的高效开发插件，它的主要目的是为了简化前端开发者在构建数据表格时的繁琐工作，特别是涉及到增、删、改、查这些常见的交互功能。layui是一款流行的前端UI框架，以其简洁的...
它提供了丰富的组件，如表格、下拉菜单、按钮、对话框等，使得开发者能够快速构建用户界面，尤其是对于增删改查（CRUD）操作的页面。在这个项目中，我们看到使用了 Maven 作为构建工具，SpringMVC 作为后端 MVC 框架...
网页增删改查是网页开发中的基础功能，主要用于管理数据，比如用户信息、商品列表等。这个源代码包提供了一套实现这些功能的后台代码，适用于初学者理解基本的Web应用交互逻辑。以下是对这些功能的详细解释： 一、...
在本项目中，Element UI可能被用于构建表单、按钮、表格等，以实现增删改查的功能，并提供分页组件以支持大量数据的高效浏览。 在实际实现过程中，开发者可能会创建Spring Boot的REST控制器，定义CRUD操作的API接口...
它提供了丰富的组件库，可以方便地实现诸如表格数据展示、增删改查等常见功能。本文将详细介绍如何利用Extjs进行数据的增删改查操作。 #### 二、知识点概述 根据题目给出的信息，本文主要围绕Extjs中的表格组件...
本项目"表格增删改查.zip"是利用JavaScript的DOM（Document Object Model）操作和事件绑定功能，实现了一个学生信息管理的表格应用。下面将详细解释其中涉及的技术点和实现过程。 1. **DOM操作**：DOM是HTML和XML...
在本项目中，"php图书管理系统实现增删改查"是一个基于PHP开发的简单图书管理应用，旨在帮助用户轻松地管理图书数据，包括添加新图书、删除现有图书、修改图书信息以及查询图书详情。这个系统对于初学者来说，是理解...
在本文中，我们将深入探讨如何使用Servlet、JSP和Ajax技术实现一个完整的增删改查（CRUD）功能以及分页。Servlet是Java Web应用程序的一部分，用于处理客户端请求和响应。JSP则是一种动态网页技术，它允许在服务器端...