Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of jQuery how to achieve coffee order management function, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this jQuery article on how to achieve coffee order management function. Let's take a look at it.

This app mainly implements the following functions:

1. Enter the customer's name in the form and select Coffee, click "Add" to send the data to table.

Every time a row of new data is generated in 2.table, a small coffee icon appears in its status column, indicating that it is in production.

3. Click on the small coffee icon to turn into a green check box, indicating that the order has been completed.

4. Click Export to export the tabular data to a CSV file.

HTML:

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

* bootstrap3 framework is used

* in the coffee selection part, I use a plug-in called bootstrap-select, which is perfectly compatible with bootstrap's UI, but when writing CSS, you should pay attention to it. You have to check DOM through browser F12 before you can write according to DOM, otherwise it is useless to write select and option directly.

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 > iTunes,' 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; $(".blank") .text (today) / / export table data to CSV $(".export") .click (function () {$(".table"). TableToCSV ();}). This is the end of the article on "how jQuery implements coffee order management". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve coffee order management function in jQuery". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.