Simple Application of coffee order management based on jQuery and jquery coffee order management

Simple Application of coffee order management based on jQuery and jquery coffee order management

This application mainly implements the following functions:

1. Enter the customer name in the table and select coffee. Click "Add" to upload the data to the table.
2. For each row of new data generated for the table, a small coffee icon will appear in the status column, indicating that the table is being created.
3. Click the coffee icon to turn it into a green check mark, indicating that the order has been completed.
4. Click Export to Export table data as a CSV file.

HTML:

<div class="container-fluid">     
* The bootstrap3 framework is used.
* For the coffee part, I used a plug-in named bootstrap-select, which is perfectly compatible with the bootstrap UI. But pay attention to it when writing CSS, you must view the DOM in the F12 browser before writing it based on the DOM. Otherwise, it is useless to directly write the select and option statements.
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('<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();  });  }); 
* For the CSV export function, I used a plug-in named tabletoCSV. You can click the link to view its usage and source code. However, this plug-in provides a single function. You can only export CSV files, but you cannot select which part of the content to export or specify the file name. If you have any better plug-ins, welcome to share ~
Here is just a simple look at the surface effect of this application, there is no data exchange thing.
Create a JSON file and use AJAX (GET, POST, DELETE, POST...) to store relevant data.
The DEMO is here. Welcome to FORK.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.