首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

BootStrap实现带有增删改查功能的表格(DEMO详解)

Posted in Javascript onOctober 26, 2016

前言

bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。

表格封装了3个版本，接下来给大家展示一下样式和代码。

版本一

1. 样式

表格布局：

BootStrap实现带有增删改查功能的表格(DEMO详解)

添加：添加一行新的空白代码

BootStrap实现带有增删改查功能的表格(DEMO详解)

修改：选中可修改的列，点击需要修改的单元格，即可变成可编辑的状态。

BootStrap实现带有增删改查功能的表格(DEMO详解)

2.代码

@using DatatableDemo.Models 
@using ITOO.FreshNewReport.ViewModel 
@{ 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<!DOCTYPE html> 
<html> 
<head> 
<title>Bootstrap 实例 - 表格</title> 
<link href="../../BootStrap/StuPersonInfo/bootstrap.min.css" rel="stylesheet" /> 
<script src="../../BootStrap/StuPersonInfo/bootstrap.min.js"></script> 
<script src="../../BootStrap/StuPersonInfo/jquery.min.js"></script> 
@*表格JS*@ 
<link href="../../BootStrap/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" /> 
<meta name="viewport" content="width=device-wdith,initia-scale=1.0"> 
@*动态添加表格*@ 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="../../BootStrap/datagrid/css/bootstrap-table.min.css" rel="stylesheet" /> 
<link href="../../BootStrap/datagrid/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="../../BootStrap/datagrid/js/jquery.min.js"></script> 
<script src="../../BootStrap/datagrid/js/jquery.base64.js"></script> 
<script src="../../BootStrap/datagrid/js/bootstrap-table.js"></script> 
<script src="../../BootStrap/datagrid/js/bootstrap-table-export.js"></script> 
@*添加批量删除*@ 
<meta charset="utf-8"> 
<script type="text/javascript" src="../../BootStrap/datagrid/js/jquery.min.js"></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 style="background: rgb(255, 255, 255) none repeat scroll 0% 0%;"><td ><input type="checkbox" value="" editable="false" name="checkbox"></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="../../JS/TableJs.js"></script> 
</head> 
<body> 
<script src="../../BootStrap/FamilyJS.js"></script> 
@*按钮*@ 
<div class="heading"> 
@*添加按钮*@ 
<button id="build" type="button" class="btn btn-success" data-toggle="modal" data-target="" onclick="append()"> 
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加 
</button> 
@*修改按钮*@ 
<button id="btnEdit" type="button" class="btn btn-warning"> 
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改 
</button> 
@*删除按钮---无弹出框*@ 
<button id="btnDel" type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteForm" onclick=""> 
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除 
</button> 
</div> 
@*表格*@ 
<div class="widget-content padded clearfix"> 
<table id="AddFamily" class="table table-bordered table-striped" width="1000px" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto"> 
<thead> 
<th class="check-header hidden-xs"> 
<input id="checkAll" name="checkAll" type="checkbox"> 
<th>姓名</th> 
<th>称谓 </th> 
<th>年龄 </th> 
<th>政治面貌</th> 
<th>电话号码 </th> 
<th>工作单位</th> 
<th>家庭住址</th> 
</thead> 
<tbody id="mainbody"> 
@*从数据库读取的数据，遍历ViewModel里面的字段并赋值*@ 
@foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List<FamilyInfoViewModel>) 
{ 
<tr> 
<td> 
<input name="checkbox" type="checkbox" id="1"> 
</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="../../BootStrap/jquery.bdt.css" rel="stylesheet" /> 
@*创建表格*@ 
<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. 样式

布局样式：

BootStrap实现带有增删改查功能的表格(DEMO详解)

添加/修改：

BootStrap实现带有增删改查功能的表格(DEMO详解)

2. 代码

@using ITOO.FreshNewReport.ViewModel 
@{ 
Layout = null; 
} 
<html> 
<head> 
<title>数据表格编辑_大气漂亮的Bootstrap后台管理系统模板Se7en - JS代码网 
</title> 
<!--<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700" media="all" rel="stylesheet" type="text/css" />--> 
<link href="../../BootStrap/se7ven/../../BootStrap/se7ven/stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/font-awesome.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/se7en-font.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/isotope.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/jquery.fancybox.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/fullcalendar.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/wizard.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/select2.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/morris.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/datatables.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/datepicker.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/timepicker.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/colorpicker.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/bootstrap-switch.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/daterange-picker.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/typeahead.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/summernote.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/pygments.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/style.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/color/green.css" media="all" rel="alternate stylesheet" title="green-theme" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/color/orange.css" media="all" rel="alternate stylesheet" title="orange-theme" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/color/magenta.css" media="all" rel="alternate stylesheet" title="magenta-theme" type="text/css" /> 
<link href="../../BootStrap/se7ven/stylesheets/color/gray.css" media="all" rel="alternate stylesheet" title="gray-theme" type="text/css" /> 
<script src="../../BootStrap/se7ven/javascripts/jquery.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery-ui.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/bootstrap.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/raphael.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/selectivizr-min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery.mousewheel.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery.vmap.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery.vmap.sampledata.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery.vmap.world.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery.bootstrap.wizard.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/fullcalendar.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/gcal.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery.dataTables.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/datatable-editable.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery.easy-pie-chart.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/excanvas.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery.isotope.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/isotope_extras.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/modernizr.custom.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery.fancybox.pack.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/select2.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/styleswitcher.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/wysiwyg.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/summernote.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery.inputmask.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery.validate.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/bootstrap-fileupload.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/bootstrap-datepicker.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/bootstrap-timepicker.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/bootstrap-colorpicker.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/bootstrap-switch.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/typeahead.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/daterange-picker.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/date.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/morris.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/skycons.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/fitvids.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/jquery.sparkline.min.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/main.js" type="text/javascript"></script> 
<script src="../../BootStrap/se7ven/javascripts/respond.js" type="text/javascript"></script> 
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> 
</head> 
<body> 
<div class="modal-shiftfix"> 
<div class="container-fluid main-content"> 
<div class="page-title"> 
<h1>Editable DataTables 
</h1> 
</div> 
<!-- DataTables Example --> 
<div class="row"> 
<div class="col-lg-12"> 
<div class="widget-container fluid-height clearfix"> 
<div class="heading"> 
<i class="icon-table"></i>DataTable with Sorting<a class="btn btn-sm btn-primary-outline pull-right" href="#" id="add-row"><i class="icon-plus"></i>Add row</a> 
</div> 
<div class="widget-content padded clearfix"> 
<table class="table table-bordered table-striped" id="datatable-editable"> 
<thead> 
@*<th class="check-header hidden-xs"> 
<input id="checkAll" name="checkAll" type="checkbox">*@ 
<th>姓名</th> 
<th>称谓 </th> 
<th>年龄 </th> 
<th>政治面貌</th> 
<th>电话号码 </th> 
<th>工作单位</th> 
<th class="hidden-xs">家庭住址</th> 
<th width="60"></th> 
<th width="75"></th> 
</thead> 
<tbody> 
@foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List<FamilyInfoViewModel>) 
{ 
<tr> 
@*<td> 
<input name="checkbox" type="checkbox" id="1"> 
</td>*@ 
<td>@enStuFam.Name </td> 
<td>@enStuFam.RelationShip</td> 
<td>@enStuFam.Age</td> 
<td>@enStuFam.PoliticalStatus</td> 
<td>@enStuFam.TelNum </td> 
<td>@enStuFam.WorkUnit</td> 
<td>@enStuFam.Address </td> 
<td> 
<a class="edit-row" href="#">Edit</a> 
</td> 
<td> 
<a class="delete-row" href="#">Delete</a> 
</td> 
</tr> 
} 
</tbody> 
</table> 
</div> 
</div> 
</div> 
</div> 
<!-- end DataTables Example --> 
</div> 
</div> 
</body> 
</html>

版本三

1.样式

卡片式表格：

BootStrap实现带有增删改查功能的表格(DEMO详解)

添加/修改 弹出一个新页面：

BootStrap实现带有增删改查功能的表格(DEMO详解)

2.代码

View代码：

<div class="container-fluid main-content"> 
<div class="row"> 
<div class="col-lg-12"> 
<div class="widget-container fluid-height clearfix"> 
@*按钮*@ 
<div class="heading"> 
@*添加按钮*@ 
<span class="ui-button"> 
<a class="btn btn-success glyphicon glyphicon-plus" href="../AddEduInfo/AddEduInfo">添加</a> 
</span> 
@*修改*@ 
<span class="ui-button"> 
<a class="btn btn-warning glyphicon glyphicon-edit" href="../AddEduInfo/AddEduInfo">修改</a> 
</span> 
@*删除*@ 
@* <span class="ui-button" data-target="#myModal" > 
<a class="btn btn-danger glyphicon glyphicon-minus" >删除</a> 
</span>*@ 
<span> 
<button type="button" class="btn btn-danger glyphicon glyphicon-minus" data-toggle="modal" data-target="#myModal"> 
删除 
</button> 
</span> 
</div> 
<table id="events-table" style="font-size: 15px" class="table" data-toggle="table" data-card-view="true" data-url="/StuPersonInfo/ShowEducation"> 
<thead> 
<tr class="info"> 
<th data-field="state" data-checkbox="true"></th> 
<th data-field="StartDate" data-sortable="true">开始日期</th> 
<th data-field="EndDate" data-sortable="true">结束日期</th> 
<th data-field="SchoolName" data-sortable="true">毕业学校</th> 
<th data-field="TeacherName" data-visible="true">证明教师</th> 
@* <th data-field="" data-sortable="true" data-formatter="operateFormatter" data-events="operateEvents">编 辑</th>*@ 
</tr> 
</thead> 
</table> 
</div> 
</div> 
</div> 
</div>

Controller代码：

#region ShowEducation() 显示教育经历 王美 2015年6月5日 
/// <summary> 
/// 显示教育经历 
/// </summary> 
/// <returns>教育经历Json</returns> 
public JsonResult ShowEducation() 
{ 
//创建WCF接口 
IEduInfoService EduServiceShow = ServiceFactory.GetEduInfoService(); 
//从缓存中获取身份证号 
string IdentityCardID = (String)MemcacheHelper.Get("IdentityCardID"); 
//调用WCF查询方法 
List<EduExperienceViewModel> listEduInfo = EduServiceShow.QueryEduInfo(IdentityCardID); 
//返回Json串 
return Json(listEduInfo, JsonRequestBehavior.AllowGet); 
} 
#endregion

以上所述是小编给大家介绍的BootStrap实现带有增删改查功能的表格(DEMO详解)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

BootStrap实现带有增删改查功能的表格(DEMO详解)

- Author -

ZeroWM

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
H5+C3+JS实现五子棋游戏（AI篇）
May 28 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
BootStrap tooltip提示框使用小结
Oct 26 #Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 #Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 #Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 #Javascript
Bootstrap 实现查询的完美方法
Oct 26 #Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 #Javascript
jquery延迟对象解析
Oct 26 #Javascript
查找算法(1) 分块(1) 嵌套(1) 循环(3) 二维数组(2) android studio(3) 移动开发(2) decorator(1) 装饰器(1) 安卓(1)
You might like
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
php＋dbfile开发小型留言本
2006/10/09 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
探讨php中header的用法详解
2013/06/07 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
基于jquery的滑动样例代码
2010/11/20 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Python生成器（Generator）详解
2015/04/13 Python
Python可变参数函数用法实例
2015/07/07 Python
Python六大开源框架对比
2015/10/19 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
python statsmodel的使用
2020/12/21 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
什么是反射？如何实现反射？
2016/07/25 面试题
应届大学生自荐信格式
2013/09/21 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
合同纠纷调解书
2015/05/20 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
python开发的自动化运维工具ansible详解
2021/08/07 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
Go gorilla/sessions库安装使用
2022/08/14 Golang