练习目标：
技术简介：
- js外部引入
- 顺序结构
- jQuery Dom操作
- JavaScrip循环技巧
- JavaScrip数据操作
资源地址：
链接：https://pan.baidu.com/s/1VZMGTKj3Aq9Zn6mtee0egw
提取码：1111
关键字：
1、append()，像元素内添加
2、border-spacing，设置table的内边距与外边距，常设为border-spacing: 0 0
3、confirm()，JavaScript的确认函数
4、splice，删除集合元素操作，参数1是下标值，参数2删除数量
评分标准：
1、创建项目层级(5分)
2、正确引入jquery-3.4.1.min.js(5分)
3、正确引入info.js初始数据(5分)
4、正确引入自定义js文件(5分)
5、按照顺序结构正确引入3个js文件(5分)
6、数据初始化(5分)
7、创建初始化函数(5分)
8、清空body标签内容(5分)
9、创建带有id的table标签，设置边框的宽度为1，并通过jQuery的append函数添加到body标签中(5分)
10、根据table标签自定义id名称获取table标签的jQuery对象(5分)
11、通过append函数添加遍历的info.js中list变量的数据。(20分)
12、通过jQuery的dom操作为table标签添加宽度属性为100%与文字居中(5分)
13、通过jQuery的dom操作为table标签设置table的内外边距为0。(5分)
14、创建一个带参的delById函数，根据info.js中的数据格式进行正确接收数据。(5分)
15、通过confirm函数来判断是否删除操作，如果不删除则直接return停止(5分)
16、通过循环遍历info.js中的对象信息来判断选中的行，如果对应的信息匹配则删除当前行信息。(5分)
17、删除完成后需要再次调用into函数进行数据重新遍历。(5分)
1、创建项目层级(5分)
2、正确引入jquery-3.4.1.min.js(5分)
3、正确引入info.js初始数据(5分)
4、正确引入自定义js文件(5分)
5、按照顺序结构正确引入3个js文件(5分)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>jQuery数据处理</title> </head> <body> <!-- 2、引入jQuery.js --> <script src="js/jquery-3.4.1.min.js"></script> <!-- 3、引入提供的初始数据 --> <script src="js/info.js"></script> <!-- 4、自定义的js文件进行数据操作 --> <script src="js/index.js"></script> </body> </html>
6、数据初始化(5分)
// 初始加载 init();
7、创建初始化函数(5分)
// 初始化函数 function init() { }
8、清空body标签内容(5分)
$("body").html("");
9、创建带有id的table标签，设置边框的宽度为1，并通过jQuery的append函数添加到body标签中(5分)
$("body").append("<table id='show_table' border=1></table>");
10、根据table标签自定义id名称获取table标签的jQuery对象(5分)
$("#show_table")
11、通过append函数添加遍历的info.js中list变量的数据。(20分)
$("#show_table").append(function () { var info = ""; list.forEach((el) => { info += "<tr>"; info += "<td>" + el.id + "</td>"; info += "<td>" + el.createDate + "</td>"; info += "<td>" + el.userName + "</td>"; info += "<td>" + el.sex + "</td>"; info += "<td>" + el.introduce + "</td>"; info += "<td>" + el.ctrl + "</td>"; info += "</tr>"; }); return info; });
12、通过jQuery的dom操作为table标签添加宽度属性为100%与文字居中(5分)
13、通过jQuery的dom操作为table标签设置table的内外边距为0。(5分)
$("#show_table").css({ width: "100%", "text-align": "center", "border-spacing": "0 0", });
14、创建一个带参的delById函数，根据info.js中的数据格式进行正确接收数据。(5分)
function delById(o) { }
15、通过confirm函数来判断是否删除操作，如果不删除则直接return停止(5分)
if(!confirm('是否删除此行?')){ return; }
16、通过循环遍历info.js中的对象信息来判断选中的行，如果对应的信息匹配则删除当前行信息。(5分)
for (let i = 0; i < list.length; i++) { if(list[i].id==o){ list.splice(i,1); break; } }
17、删除完成后需要再次调用into函数进行数据重新遍历。(5分)
function delById(o) { if(!confirm('是否删除此行?')){ return; } for (let i = 0; i < list.length; i++) { if(list[i].id==o){ list.splice(i,1); break; } } init();//重新加载 }
完整代码示例：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>jQuery数据处理</title> </head> <body> <!-- 引入jQuery.js --> <script src="js/jquery-3.4.1.min.js"></script> <!-- 引入提供的初始数据 --> <script src="js/info.js"></script> <!-- 自定义的js文件进行数据操作 --> <script src="js/index.js"></script> </body> </html>
index.js
// 初始加载 init(); // 初始化函数 function init() { $("body").html(""); $("body").append("<table id='show_table' border=1></table>"); $("#show_table").append(function () { var info = ""; list.forEach((el) => { info += "<tr>"; info += "<td>" + el.id + "</td>"; info += "<td>" + el.createDate + "</td>"; info += "<td>" + el.userName + "</td>"; info += "<td>" + el.sex + "</td>"; info += "<td>" + el.introduce + "</td>"; info += "<td>" + el.ctrl + "</td>"; info += "</tr>"; }); return info; }); $("#show_table").css({ width: "100%", "text-align": "center", "border-spacing": "0 0", }); } function delById(o) { if(!confirm('是否删除此行?')){ return; } for (let i = 0; i < list.length; i++) { if(list[i].id==o){ list.splice(i,1); break; } } init();//重新加载 }
练习的时候自己多写点注释，方便记忆。
