基于jQuery实现咖啡订单管理简单应用

<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" rel="external nofollow" target="_blank">Alen Hu</a>   </footer> 

$(document).ready(function() {   var $order = $("tbody");  var $add = $(".add-order");  var $name = $("#name");  var $drink = $("#drink");   //add new data to table  function addToTable() {   if ($name.val()) {    $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("");   } else {}  }   $add.on("click", addToTable);  $("form").keypress(function(event) {   if (event.keyCode === 13) {    event.preventDefault();    addToTable();   }  });   //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();  });  });