表格

排序表格

课程目标

练习综合运用 HTML、CSS、JavaScript 实现局部功能 练习对于代码的抽象与封装

编码

参考设计图 (opens new window)，实现一个支持列排序的表格组件

• 提供生成表格的接口，表格中的数据，表格样式尽量低耦合
• 可以配置对哪些列支持排序功能，并在表头进行排序按钮的显示，图中的样式为示意参考，可自行设定样式及交互方式
• 提供点击排序按钮后的响应接口，并提供默认的排序方法，当提供的接口没有具体实现时，按默认的排序方法进行排序操作，并更新表格中的数据显示

注意事项

• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 可以合理选择使用其它第三方类库，但不建议

冻结行列表格

课程目标

• 练习综合运用 HTML、CSS、JavaScript 实现局部功能
• 练习对于代码的抽象与封装

编码

参考设计图 (opens new window)，实现一个支持首行冻结的表格组件

• 当页面向下滚动，使得第一行已经在屏幕外时，则第一行则变成始终固定在屏幕最上方

• 当整个表格都滚动出屏幕时，固定的第一行也消失 注意事项

• 请注意代码风格的整齐、优雅

• 代码中含有必要的注释

• 可以合理选择使用其它第三方类库，但不建议

可编辑的表格

课程目标

• 练习综合运用 HTML、CSS、JavaScript 实现局部功能
• 练习对于代码的抽象与封装

编码

参考设计图 (opens new window)，实现可以行内编辑的表格

• 每一行最后一列添加两个工具按钮，分别为编辑和删除
• 点击编辑就编辑这一行的内容，点击删除弹出提示框是否确认要删除，点击确定，删除这一行内容，否则撤销删除操作
• 点击新增按钮，表格增加一行,并且末尾显示保存和取消两个按钮，分别实现完成一行数据的新增和取消新增这行数据

注意事项

• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 可以合理选择使用其它第三方类库，但不建议

表格拓展功能

课程目标

• 练习综合运用 HTML、CSS、JavaScript 实现局部功能
• 练习对于代码的抽象与封装

编码

实现表格一些拓展功能，包括表格导入导出以及查询和分页功能

• 给表格顶部添加一个导入按钮，可以将 excel 数据导入生成表格
• 给表格添加一个导出按钮，可以将表格中数据导出为 Excel 表
• 给表格顶部一个查询输入框，表格可以根据输入框的内容自动筛选出内容
• 在表格实现分页，并且可以动态设定每一页展示多少行数据，可以实现表格跳转到指定页码

注意事项

• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 可以合理选择使用其它第三方类库，但不建议

进阶任务

如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。