jQuery怎么实现咖啡订单管理功能

这篇文章主要介绍了jQuery怎么实现咖啡订单管理功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇jQuery怎么实现咖啡订单管理功能文章都会有所收获，下面我们一起来看看吧。

这款应用主要实现以下几个功能：

1.在表格中输入客户姓名并选择咖啡，点击"Add"能够把数据传至table。
2.table的每生成一行新数据，其status列都会出现一个小咖啡图标，表示正在制作中。
3.点击这个小咖啡图标，可以变成一个绿色的勾勾，表示该订单已经完成。
4.点击Export可以把表格数据导出为CSV文件。

HTML：

     
Coffee Orders
     
     
              
         
           
             
               
                            
                            Latte               Moccha               Cappuchino               Fat White                        
           Add           Reset         
       
              
         
           
             
               
Name
               
Order
               
Status
             
           
           
         
         
           Export to CSV         
       
     
     
     
       Order List of      
   
   

*使用了bootstrap3框架
*选择咖啡的部分，我使用了一款叫bootstrap-select的插件，可以完美兼容bootstrap的UI，但是写CSS的时候要注意一下，得通过浏览器F12查看DOM后，方可根据DOM来写，否则直接写select和option是没用的。

JQuery：

$(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('' + $name.val() + '' + $drink.val() + '');    $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('');  });   //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();  });  });

关于"jQuery怎么实现咖啡订单管理功能"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"jQuery怎么实现咖啡订单管理功能"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。