web前端表格制作教程，都是干货！附源码和学习教程
分享一篇最近学习总结的前端表格制作教程，先看下方截图，具体演示的功能虽然简单，不过很有实际意义，主要涵盖表格展示数据、删除数据、修改数据、分页、模态窗等常见功能，其中也涉及一些样式的调整，比如隔行变色，此类文章网上很多很多，我也看过不少，但是网上文章都存着一个问题：很多文章代码写的很笼统，跳跃性比较大，你可能哪怕有一个地方看不懂，不知道怎么修改，程序就运行不起来，得不到想要的表格效果和功能，而此篇文章，我会尽可能详细介绍我做的功能的每一步是怎么得来的，并且本文源码也完全开源分享，运行中如果有任何问题，也欢迎留言提一些建议。
一、框架选择：
本文主要用bootstrap和bootstrap-table表格库构建演示demo，部分逻辑功能需要手写js/jquery
二、引入库：
导入库我导入的网上的cdn文件，如果需要下载，你可以根据下方版本进行下载，两个css文件，4个js文件，bootstrap-table基于bootstrap，所有要有bootstrap的css和js文件引入，同时也引入jquery
<head> <meta charset="UTF-8" /> <title>表格演示Demo</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/locale/bootstrap-table-zh-CN.min.js"></script> </head>
三、页面布局HTML部分：
html部分只放下面两个内容即可：
表格：只放一个空的table即可
模态窗：从bootstrap官方复制粘贴模态窗组件代码，我这里代码有折叠
模态窗代码展开的话，大家就是下面的样子，基本上你就改改一些信息即可，下面的修改按钮，绑定了一个click事件，用来保存修改的数据
四、页面样式部分：看注释
<style type="text/css">
/* 修改和删除按钮样式*/
#delUser,#dupUser{
background: #1caf9a;
color: #FFFFFF;
border: none;
margin-left: 12px;
}
/* 表头背景色：蓝色*/
#mytable tr th{background:#1c91db;color:#fff;}
/* 隔行变色额*/
#mytable tr:nth-child(even) {
background: #f0f0f0;
}
</style>五、JS部分
js部分是核心
js第一步：创建表格/参数配置
bootstrapTable方法就是根据你里面的参数创建表格的方法，直接复制粘贴下方代码，最主要你要构造列信息columns和数据data，也是最重要的传入数据，其他的如分页、每页显示条数等根据下方注释，再运行下程序根据显示效果对比，很容易明白
js第二步：构造columns和data
data数据和columns都是常见的[{},{},{}....]的数据结构
对于按钮，我们我们通过formatter字段生成
js第三步：构造删除/修改按钮
这一步构造按钮，通过拼接标签，并分别绑定两个按钮的点击事件
点击删除执行：delUser(this)
点击修改执行：updUser(this)
其中this代表当前按钮，也就是a标签，我们作为参数传入进去
function option(value, row, index) {
var htm =
'<button id="delUser" userId='+ value + ' onclick="delUser(this)">删除</button><button id="dupUser" onclick="updUser(this)">修改</button>'
return htm;
}js第四步：删除方法
通过找删除按钮的父元素的父元素，定位到当前行，删除（隐藏）
// 删除
function delUser(obj) {
$(obj).parent().parent().hide();
}js第五步：修改方法
点击修改某行的数据的时候，先获取下填充到模态窗中，这里弹窗的出现，我们用modal("show"）即可，隐藏模态窗modal("hide")
row_tr是获取当前行数，为了下一步保存数据时候知道我改的第几行，用全局变量保存了，后面其他方法可以使用
// 编辑数据
var row_tr
function updUser(obj){
row_tr = obj.parentNode.parentNode.rowIndex;//获取当前行数
console.log(row_tr)
name = $(obj).parent().parent().find("td").eq(1).text()
age = $(obj).parent().parent().find("td").eq(2).text()
city = $(obj).parent().parent().find("td").eq(3).text()
$("#info_edit").modal('show');
$("#name").val(name);
$("#city").val(city);
$("#age").val(age);
}js第六步：保存方法
修改后我们获取下修改后的数值，在表格刚才的那行进行渲染新的数据
// 修改保存
function save(obj){
var save_name = $("name").val();
var save_age = $("#age").val();
var save_city = $("#city").val();
$("#mytable tbody tr").eq(row_tr-1).find("td").eq(1).text(save_name)
$("#mytable tbody tr").eq(row_tr-1).find("td").eq(2).text(save_age)
$("#mytable tbody tr").eq(row_tr-1).find("td").eq(3).text(save_city)
$("#info_edit").modal('hide');
}js第七步：删除确认弹窗
有了上面的基本功能，这里加个额外的小功能，再对功能进一步优化，比如我在删除的时候，考虑到手抖的情况，可能会不小心点到删除按钮而直接删除数据，这是我们不想看到的，则可以通过加一个删除确认弹窗来实现是否删除数据
定义一个is_delete方法，在执行删除操作的时候先调用判断一下，通过js的confirm弹窗如果确定（删除）的话则返回true，如果取消（不删除）的话返回false，以此来觉得是否真正删除数据
// 确认是否删除
function is_delete(obj) {
if (confirm("确认删除吗？")) {
return true
}
return false
}
// 删除
function delUser(obj) {
var delete_sign = is_delete();
if(delete_sign==true){
$(obj).parent().parent().hide();
}else{
console.log("不删除")
}
}以上演示的仅仅是一个基本流程，其实很多时候并不像我这样只是单独在前端进行操作，而是前后端交互配合来实现很多功能，这时候，你就要用所会的知识，一般涉及form表单请求、a链接href请求、ajax请求、ajax回调函数、后端逻辑相互配合来做。
领资料啦~
资料图
资料图
资料图
资料图
所以，学习前端一定要紧跟潮流，了解最新的核心内容。小编这边整理了2019最新的web前端的学习资料，包括项目实战、源码、教程等，一共准备了500份，学习前端的小伙伴。
只需要点赞并关注，私信“资料”就可以免费领取啦!~