jquery Sortable实现表格增加拖拽排序和删除效果代码
代码语言:html
所属分类:表格
代码描述:jquery Sortable实现表格增加拖拽排序和删除效果代码,点击下面增加可增加表格行。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-size: 14px;
}
.recipe {
padding: 1em;
}
.recipe__title {
margin-top: 0;
}
.recipe__info {
vertical-align: top;
text-align: right;
padding: 0 1em 0 0;
margin: 0 1.3em 0 0;
font-weight: bold;
color: #454545;
border-right: 1px dotted #EEE;
width: 300px;
float: left;
}
.recipe__ingredients {
float: left;
}
.recipe-table {
position: relative;
padding: 1em;
border: 1px solid #DDD;
box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5);
z-index: 10;
}
.recipe-table__cell {
vertical-align: top;
padding: 3px 5px;
}
.recipe__text-field {
margin:0;
padding: .45em 0.92em;
font-size: 1em;
line-height: 1.4;
color: #555555;
background-color: #FFF;
background-image: none;
border: 1px solid #CCC;
border-left:1px solid #CCC;
}
.recipe-table__add-row {
margin-top: 0;
position: relative;
border-top: 1px solid #EEE;
z-index: 8;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0