本次小程序采用ES6开发标准，不会的宝宝们请先学习，再来观看吧！
使用条件：使用ES6标准开发；因为采用了Bootstrap在线，所以需要联网；VSCode开发工具，在本地服务器中打开。
代码展示：
Demo.html（网页），Demo.css（样式），Test01.js（菜单类），Test02.js（循环菜单），Test03.js(增，删操作)
下面进行一一展示：
Demo.html（网页）：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="Demo.css" rel="external nofollow" > <script type="text/javascript" src="Test03.js"></script></head><body> <div class="container"> <div class="row"> <div class="col-md-6"> <table id='table1' class="table table-bordered table-striped"> <tr> <td>名称</td> <td>价格</td> <td>图片</td> <td>操作</td> </tr> <tbody id = 'tbody'></tbody> </table> </div> <div class="col-md-6"> <table id='table2' class="table table-bordered" > <tr> <td>名称</td> <td>价格</td> <td>数量</td> <td>操作</td> </tr> <tbody ></tbody> </table> </div> </div> </div> <script type="module"> import {db_foot} from './Test02.js'; let contents = []; window.onload = function(){ for(const foots of db_foot()){ contents.push(` <tr> <td>${foots.name}</td> <td>${foots.price}</td> <td>${foots.pic}</td> <td><button value="${foots.name}" money="${foots.price}" class="btn btn-sm btn-info" οnclick="sss(this)">加入菜单</button></td> </tr> `); document.getElementById('tbody').innerHTML = contents.join(""); }; }; </script> </body></html>Demo.css（样式）：
*{margin: 0;padding: 0;}tr,td{ text-align:center; line-height: 20px;}td{ vertical-align: middle;}Test01.js（菜单类）：
export default class Person{ constructor(name,price,pic){ this.name = name; this.price = price; this.pic = pic; }}Test02.js（循环菜单）：
import Person from './Test01.js'; export function db_foot(){ let foots = new Array(); foots.push(new Person('鱼香肉丝',100,'')); foots.push(new Person('宫保鸡丁',200,'')); foots.push(new Person('菠萝吹雪',300,'')); return foots;}
新闻热点
疑难解答
