一、设计思路:
- 首先创建一个含表头的表单
- 利用json-server和axios进行表格数据的获取,利用模板字符串生成对应的行列
- 设置相关的配置项(哪些列可编辑、编辑时的验证规则等)
- 设置一个函数setEditable()来设置哪些列可以编辑
- 编辑时需要利用正则表达式验证是否符合修改规则
- 在编辑后利用axios发送请求将json文件中的数据更新
二、具体实现:
1.html结构:
<body>
<div class="form">
<table class="table">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>理综</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script></script>
<script src="./axios.js"></script>
<script src="./index-(1).js"></script>
</body>
2.axios获取表格数据:
//创建axios实例 instance
const instance = axios.create({
//该地址为默认的地址
baseURL: "http://localhost:3000/t_grades",
});
function getEnrollments() {
instance.get("http://localhost:3000/t_grades").then((res) => {
const Table = document.querySelector(".table");
Table.tBodies[0].innerHTML = "";
const jsonData = res.data; // 响应数据
console.log(res.data, 2);
var trs = "";
jsonData.forEach((item) => {
// 从关联表中获取学生姓名和课程名称
const studentId = item.id;
const studentName = item.Student_name;
const studentSex = item.Student_sex;
const chinese = item.Chinese_score;
const math = item.Math_score;
const english = item.English_score;
const consolidation = item.consolidation_score;
// 创建一行表格,并将选课数据添加到其中
const row = `<tr>
<td>${studentId}</td>
<td>${studentName}</td>
<td>${studentSex}</td>
<td>${chinese}</td>
<td>${math}</td>
<td>${english}</td>
<td>${consolidation}</td>
<td><button class='delete' id = ${item.id}>删除</button></td>
</tr>`;
// 将这一行添加到表格中
trs += row;
});
Table.tBodies[0].innerHTML = trs;
handleOper();
setEditable(editable);
totalTable();
last();
});
}
getEnrollments();
3.可配置项的设置
// 配置项
let jsonData = "";
let editable = [2, 3, 4, 5, 6]; //可编辑的列数 第 3 4 5 6列
let Regnum = /^(1[0-4][0-9]|150)$|^([1-9][0-9])$|^[0-9]$/; //正则表达式判断
let Regsex = /^(男|女){1}$/; //正则表达式判断性别
let Regnum_300 = /^([1-2][0-9][0-9]|300)$|^([1-9][0-9])$|^[0-9]$/; //正则表达式判断0-300
4.设置可编辑的单元格:
// 1.设置可编辑单元格——setEditable
function setEditable(editable) {
let table = document.querySelector("table");
var row_num = table.rows.length; // 获取表格行数
for (let i = 1; i < row_num; i++) {
let column_num = table.rows[i].cells; //获取表格列数
let e = editable;
editable.forEach((element) => {
column_num[element].setAttribute("name", "editable");
});
}
// click(); //点击时
}
5.点击单元格进行编辑时判断利用哪个正则表达式,并调用更新函数
function click() {
let editcells = document.getElementsByName("editable");
console.log(editcells, 1);
for (let i = 0; i < editcells.length; i++) {
if (i == 0 || i == 5 || i == 10 || i == 15) {
editcells[i].onclick = function () {
updateCell(this, Regsex);
};
} else if (i == 4 || i == 9 || i == 14 || 19) {
editcells[i].onclick = function () {
updateCell(this, Regnum_300);
};
} else {
editcells[i].onclick = function () {
updateCell(this, Regnum);
};
}
}
}
6.更新函数(此处暂时只能判断是否符合修改规则,进行单元格数据的修改,没有利用axios发送post请求进行json文件数据的更改)
// 3.数据更新、验证规则——updateCell
function updateCell(element, Reg) {
if (document.getElementsByClassName("new_input").length == 0) {
// 获取当前数据
let old_value = element.innerText;
element.innerHTML = "";
// 创建新元素input
var input = document.createElement("input");
input.value = old_value;
input.setAttribute("class", "new_input");
input.type = "text";
element.appendChild(input);
input.focus();
// 失去焦点时——确认修改
input.onblur = function () {
// this.value = parseFloat(this.value);
console.log(this.value);
console.log(this.type);
// 判断是否符合修改规则
/* if (isNaN(this.value)) {
this.value = old_value;
} else { */
if (!Reg.test(this.value)) {
console.log("error", this.value, Reg);
this.value = old_value;
// updateData()
// 错误提示
alert("不符合规则");
this.classList.remove("new_input");
return;
} else {
element.innerHTML = this.value;
}
// }
// document.querySelector(".new_input").remove();
};
} else {
console.log("ERROR-input.length!=0");
}
}
function updateData() {
//利用instance.post().then()更新json数据
}