SOURCE

console 命令行工具 X clear

                    
>
console
$(document).ready(function() {

    var $order = $("tbody");
    var $add = $(".add-order");
    var $name = $("#name");
    var $drink = $("#drink");

    //add new data to table
    $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("");
    });

    //click to tick
    $order.delegate('.customer-status > i', 'click', function() {
        $(this).parent().html('<i class="fa fa-check" aria-hidden="true"></i>');
    });

    //date
    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 table data to CSV
    $(".export").click(function(){
		$(".table").tableToCSV();
	});

});
<div class="container-fluid">
        <h1>Coffee Orders</h1>
        <hr>
        <div class="row">
            <!-- order form -->
            <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>
            <!-- order list -->
            <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;
}