bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。
表格封装了3个版本，接下来给大家展示一下样式和代码。
版本一
1. 样式
表格布局：
添加：添加一行新的空白代码
修改：选中可修改的列，点击需要修改的单元格，即可变成可编辑的状态。
2.代码
@using DatatableDemo.Models @using ITOO.FreshNewReport.ViewModel @{ Layout = "~/Views/Shared/_Layout.cshtml"; } <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 表格</title> <link href="" /> <script src=""></script> <script src=""></script> @*表格JS*@ <link href="" /> <meta content="width=device-wdith,initia-scale=1.0"> @*动态添加表格*@ <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0"> <link href="" /> <link href="" /> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> @*添加批量删除*@ <meta charset="utf-8"> <script type="text/javascript" src=""></script> <script type="text/javascript"> $(document).ready(function () { $("#btnDel").click(function () { $(":checked").parent().parent().fadeOut("show"); //隐藏所有被选中的input元素 //parent() 获得当前匹配元素集合中每个元素的父元素, }) $("tr").mousemove(function () { $(this).css("background", "#F0F0F0"); //鼠标经过背景颜色变为灰色 }) $("tr").mouseout(function () { $(this).css("background", "#fff"); //离开后背景颜色回复白色 }) //全选 $("#checkAll").click(function () { if ($("#checkAll").attr("checked") == false) { $("input[name='checkbox']").each(function () { $(this).attr("checked", true); }); } else { $("input[name='checkbox']").each(function () { $(this).attr("checked", false); }); } }); }); </script> @*添加一行新表格数据*@ <script> function append() { var strAppend = '<tr><td ><input type="checkbox" value="" editable="false"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><tr>'; $("#AddFamily tbody ").append(strAppend).editableTableWidget(); } </script> @*表格样式CSS*@ <style> table { border-collapse: collapse; border: 1px solid #FFFFFF; } table td { text-align: center; height: 30px; font-size: 12px; line-height: 30px; border: 1px solid #efecec; } </style> @*添加批量删除*@ <script src=""></script> </head> <body> <script src=""></script> @*按钮*@ <div> @*添加按钮*@ <button type="button" data-toggle="modal" data-target=""> <span aria-hidden="true"></span>添加 </button> @*修改按钮*@ <button type="button"> <span aria-hidden="true"></span>修改 </button> @*删除按钮---无弹出框*@ <button type="button" data-toggle="modal" data-target="#DeleteForm"> <span aria-hidden="true"></span>删除 </button> </div> @*表格*@ <div> <table cellspacing="0" cellpadding="0"> <thead> <th> <input type="checkbox"> <th>姓名</th> <th>称谓 </th> <th>年龄 </th> <th>政治面貌</th> <th>电话号码 </th> <th>工作单位</th> <th>家庭住址</th> </thead> <tbody> @*从数据库读取的数据，遍历ViewModel里面的字段并赋值*@ @foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List<FamilyInfoViewModel>) { <tr> <td> <input type="checkbox"> </td> <td data-field="Name">@enStuFam.Name </td> <td data-field="RelationShip">@enStuFam.RelationShip</td> <td data-field="Age">@enStuFam.Age</td> <td>@enStuFam.PoliticalStatus</td> <td>@enStuFam.TelNum </td> <td>@enStuFam.WorkUnit</td> <td>@enStuFam.Address </td> </tr> } </tbody> </table> </div> <link href="" /> @*创建表格*@ <script> //绑定编辑、回车事件 $(function () { // $('#build').click(build);//实现创建表格 $('#btnEdit').click(edit); $('#cells, #rows').keyup(function (e) { if (e.keyCode === 13) { //添加存入数据库的代码 } }); }); //将表格转成可编辑的表格 function edit(index) { // $('#table').editableTableWidget();--效果是单击编辑按钮后，所有的都可以编辑 // $(":checked").editableTableWidget(); $(":checked").parent().parent().editableTableWidget();//整行的可以编辑 } //转成可编辑的表格 /*global $, window*/ $.fn.editableTableWidget = function (options) { 'use strict'; return $(this).each(function () { var buildDefaultOptions = function () { var opts = $.extend({}, $.fn.editableTableWidget.defaultOptions); opts.editor = opts.editor.clone(); return opts; }, activeOptions = $.extend(buildDefaultOptions(), options), ARROW_LEFT = 37, ARROW_UP = 38, ARROW_RIGHT = 39, ARROW_DOWN = 40, ENTER = 13, ESC = 27, TAB = 9, element = $(this), editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()), active, showEditor = function (select) { active = element.find('td:focus'); if (active.length) { editor.val(active.text()) .removeClass('error') .show() .offset(active.offset()) .css(active.css(activeOptions.cloneProperties)) .width(active.width()) .height(active.height()) .focus(); if (select) { editor.select(); } } }, setActiveText = function () { var text = editor.val(), evt = $.Event('change'), originalContent; if (active.text() === text || editor.hasClass('error')) { return true; } originalContent = active.html(); active.text(text).trigger(evt, text); if (evt.result === false) { active.html(originalContent); } }, movement = function (element, keycode) { if (keycode === ARROW_RIGHT) { return element.next('td'); } else if (keycode === ARROW_LEFT) { return element.prev('td'); } else if (keycode === ARROW_UP) { return element.parent().prev().children().eq(element.index()); } else if (keycode === ARROW_DOWN) { return element.parent().next().children().eq(element.index()); } return []; }; editor.blur(function () { setActiveText(); editor.hide(); }).keydown(function (e) { if (e.which === ENTER) { setActiveText(); editor.hide(); active.focus(); e.preventDefault(); e.stopPropagation(); } else if (e.which === ESC) { editor.val(active.text()); e.preventDefault(); e.stopPropagation(); editor.hide(); active.focus(); } else if (e.which === TAB) { active.focus(); } else if (this.selectionEnd - this.selectionStart === this.value.length) { var possibleMove = movement(active, e.which); if (possibleMove.length > 0) { possibleMove.focus(); e.preventDefault(); e.stopPropagation(); } } }) .on('input paste', function () { var evt = $.Event('validate'); active.trigger(evt, editor.val()); if (evt.result === false) { editor.addClass('error'); } else { editor.removeClass('error'); } }); element.on('click keypress dblclick', showEditor) .css('cursor', 'pointer') .keydown(function (e) { var prevent = true, possibleMove = movement($(e.target), e.which); if (possibleMove.length > 0) { possibleMove.focus(); } else if (e.which === ENTER) { showEditor(false); } else if (e.which === 17 || e.which === 91 || e.which === 93) { showEditor(true); prevent = false; } else { prevent = false; } if (prevent) { e.stopPropagation(); e.preventDefault(); } }); element.find('td').prop('tabindex', 1); $(window).on('resize', function () { if (editor.is(':visible')) { editor.offset(active.offset()) .width(active.width()) .height(active.height()); } }); }); }; $.fn.editableTableWidget.defaultOptions = { cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', 'text-align', 'font', 'font-size', 'font-family', 'font-weight', 'border', 'border-top', 'border-bottom', 'border-left', 'border-right'], editor: $('<input>') }; </script> </body> </html>
版本二
1. 样式
布局样式：