console
$(document).ready(function() {
var $order = $("tbody");
var $add = $(".add-order");
var $name = $("#name");
var $drink = $("#drink");
$add.on("click", function() {
$order.append('<tr><td class="customer-name">' + $name.val() + '</td><td class="customer-order">' + $drink.val() + '</td><td class="customer-status"><i class="fa fa-coffee" aria-hidden="true"></i></td></tr>');
$name.val("");
});
$order.delegate('.customer-status > i', 'click', function() {
$(this).parent().html('<i class="fa fa-check" aria-hidden="true"></i>');
});
var myDate = new Date();
var day = myDate.getDate();
var month = myDate.getMonth() + 1;
var year = myDate.getFullYear();
function plusZero(x) {
if (x < 10) {
x = "0" + x;
}
else {x = x;}
return x;
}
var today = plusZero(day) + "." + plusZero(month) + "." + year;
$(".today").text(today);
$(".export").click(function(){
$(".table").tableToCSV();
});
});
<div class="container-fluid">
<h1>Coffee Orders</h1>
<hr>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 order-form">
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></div>
<input type="text" class="form-control order-name" id="name" required="required" placeholder="Name">
</div>
<select class="selectpicker" id="drink">
<option>Latte</option>
<option>Moccha</option>
<option>Cappuchino</option>
<option>Fat White</option>
</select>
</div>
<button type="button" class="btn btn-primary add-order">Add</button>
<button type="reset" class="btn btn-primary pull-right">Reset</button>
</form>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 order-list">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Order</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div>
<a class="pull-right export" data-export="export">Export to CSV</a>
</div>
</div>
</div>
<hr>
<div class="time">
Order List of <span class="today"></span>
</div>
</div>
<footer>
Designed By <a href="http://blog.csdn.net/alenhhy" target="_blank">Alen Hu</a>
</footer>
* {
outline: 0;
}
body {
background: #f5f5f5;
}
.container-fluid {
background: white;
border-radius: 10px;
margin: 50px auto;
padding: 20px;
width: 600px;
}
h1 {
font-family: 'Sansita', sans-serif;
text-align: center;
margin: 0 auto;
color: #a67966;
}
.input-group {
margin: 0 auto 10px;
}
.input-group-addon {
width: 25% !important;
background: #a67966;
color: white;
border-color: #a67966;
}
.input-group > input {
border-color: #a67966;
}
.bootstrap-select {
width: 100% !important;
margin: 0 auto 10px !important;
}
.bootstrap-select button {
border-color: #a67966;
}
.bootstrap-select button:hover,
.bootstrap-select button:focus,
.bootstrap-select button:active {
background: white !important;
}
.bootstrap-select span {
color: #a67966;
}
.bootstrap-select .dropdown-menu {
border-color: #a67966;
}
.bootstrap-select .dropdown-menu ul li a:hover,
.bootstrap-select .dropdown-menu ul li a:focus,
.bootstrap-select .dropdown-menu ul li a:active {
background: #f5f5f5;
}
.form-inline > button {
background: #a67966;
border: none;
width: 48%;
}
.form-inline > button:hover,
.form-inline > button:focus,
.form-inline > button:active {
background: #6f4e46;
}
.order-list {
border-left: 1px solid #eeeeee;
}
table th {
color: #6f4e46;
}
table td {
color: #a67966;
}
.customer-status > i {
cursor: pointer;
}
.fa-check {
color: #1E824C;
}
.export {
color: #bbbbbb;
}
.export:hover,
.export:focus,
.export:active {
color: #aaaaaa;
cursor: pointer;
}
.time {
margin-top: 20px;
text-align: center;
color: #bbbbbb;
}
footer {
text-align: center;
color: #a67966;
}