（转载）前端表格制作教程

分享一篇最近学习总结的前端表格制作教程，先看下方截图，具体演示的功能虽然简单，不过很有实际意义，主要涵盖表格展示数据、删除数据、修改数据、分页、模态窗等常见功能，其中也涉及一些样式的调整，比如隔行变色，此类文章网上很多很多，我也看过不少，但是网上文章都存着一个问题：很多文章代码写的很笼统，跳跃性比较大，你可能哪怕有一个地方看不懂，不知道怎么修改，程序就运行不起来，得不到想要的表格效果和功能，而此篇文章，我会尽可能详细介绍我做的功能的每一步是怎么得来的，并且本文源码也完全开源分享，运行中如果有任何问题，也欢迎留言提一些建议

一、框架选择：

本文主要用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/bootstrap-table@1.14.2/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/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script><script src="https://unpkg.com/bootstrap-table@1.14.2/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回调函数、后端逻辑相互配合来做

（转载）前端表格制作教程相关推荐

excel表格制作教程
excel表格制作教程入门 Excel是常用的办公软件,可以大幅提升我们的工作效率:下面就为大家介绍:excel表格制作教程入门,及常用公式! 当前操作环境为电脑端,使用笔记本:戴尔灵越5000,对应 ...
php 表格制作教程下载,word表格如何制作教程？
word表格如何制作教程? word表格制作的方法: 1.鼠标移到需要插入表格的位置,选择"插入"菜单中的"表格",在弹出的小菜单中拖动鼠标,比如我们选择5行5 ...
mysql工作表格制作教程_Access制作复杂报表
何制作复杂报表利用excel输出复杂报表在读这篇文章以前首先要提醒大家,Access 本身的报表也具有很强的实用性和强大的功能,只有当你发掘了其本身全部的功能却仍不能满足你对报表的特殊要求时才请使用 ...
电脑表格制作教程入门_第三节 CorelDRAW制作作品的流程 - CorelDRAW基础入门教程 - 平面设计学院...
CorelDraw简称CDR,是加拿大Corel软件公司产品.它是一个绘图与排版的软件,它广泛地应用于商标设计.标志制作.模型绘制.插图描画.排版及分色输出等诸多领域.作为一个强大的绘图软件,自然广受 ...
php生成值班表,EXCEL表制作自动排列值班表【excel值班表表格制作教程】
怎么用excel排值班表方法/步骤 1 制作值班式 2 在单 F2中输入:=TODAY(),单元格格示如图合A1-C1,在单元格中输入:=TODAY(),单元格格式显示如图在I-N,栏中创建值 ...
表格制作教程入门_广告制作技术全套教程电商海报设计零基础入门视频流量运营教程...
广告制作技术全套教程 https://pan.baidu.com/s/1AeMp3Yuao676QA-hyRpvsw 提取码: 7i1p 电商海报设计零基础入门https://pan.baidu.co ...
Excel表格制作教程-合并相同项，并将对应的值求和
关注公众号:万能的Excel 并回复[自动求和]获取源文件! 功能要求: 工作中常常需要统计表格中每一项总和,人工筛选每一项总和需要耗费很大的精力本工作簿实现的功能: 1.将相同ID号,相同 ...
excel小写转大写公式_一个复制粘贴的问题，竟然难倒了90%的Excel人【Excel表格制作教程】...
点击蓝字发送[目录]送你200篇独家Excel精华教程全套Excel视频,限时特价,扫码观看! 如果我对你说,我可以将一个连续区域中的值,快速粘贴到筛选后不连续的区域中,你信吗?例如要将下图右侧连续 ...
c语言输出成绩表格制作教程,c语言输出表格用C语言怎么样输出表格
c语言输出表格用C语言怎么样输出表格答案:1 信息版本:手机版解决时间 2019-10-06 04:28 已解决 2019-10-05 10:38 c语言输出表格用C语言怎么样输出表格最佳答案 ...

（转载）前端表格制作教程

（转载）前端表格制作教程相关推荐

最新文章

热门文章