根据数据生成表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 500px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>菜系</th>
<th>菜名</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var arr = [{
type_id: 1,
name: "大菜",
food: [{
food_id: 1,
name: "鱼香肉丝",
price: 10
},
{
food_id: 2,
name: "红烧肉",
price: 10
},
{
food_id: 3,
name: "香辣粉",
price: 10
}
]
}, {
type_id: 2,
name: "中菜",
food: [{
food_id: 4,
name: "小炒肉",
price: 13
}, {
food_id: 5,
name: "云吞",
price: 14
}]
}, {
type_id: 3,
name: '小菜',
food: [{
food_id: 6,
name: "雪糕",
price: 15
}, {
food_id: 7,
name: "黄瓜",
price: 16
}]
}]
var tbody = document.querySelector("tbody");
// 文档碎片
var fragment = document.createDocumentFragment();
for (var j = 0; j < arr.length; j++) {
// 获取其中一个菜系对象
var obj = arr[j];
// 获取该对象的数组属性
var food = obj.food;
// 循环数组
// 将数据展示到页面上,就是创建元素然后上树的过程
for (var i = 0; i < food.length; i++) {
// console.log(food[i].price, food[i].name, obj.name);
// 创建tr
var tr = document.createElement("tr");
// 创建三个td
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
// 第一个td放 菜系
td1.innerHTML = obj.name;
// 第二个td放 菜名
td2.innerHTML = food[i].name;
// 第三个td放 价格
td3.innerHTML = food[i].price;
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
fragment.appendChild(tr);
}
}
tbody.appendChild(fragment);
</script>
</body>
</html>
非创建元素式渲染结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 500px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>菜系</th>
<th>菜名</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var arr = [
{
type_id: 1,
name: "大菜",
food: [
{
food_id: 1,
name: "鱼香肉丝",
price: 10
},
{
food_id: 2,
name: "红烧肉",
price: 10
},
{
food_id: 3,
name: "香辣粉",
price: 10
}
]
},
{
type_id: 2,
name: "中菜",
food: [
{
food_id: 4,
name: "小炒肉",
price: 13
},
{
food_id: 5,
name: "云吞",
price: 14
}
]
},
{
type_id: 3,
name: '小菜',
food: [
{
food_id: 6,
name: "雪糕",
price: 15
},
{
food_id: 7,
name: "黄瓜",
price: 16
}
]
}
]
var tbody = document.querySelector("tbody");
var str = '';
for (var j = 0; j < arr.length; j++) {
// 获取其中一个菜系对象
var obj = arr[j];
// 获取该对象的数组属性
var food = obj.food;
// 循环数组
// 将数据展示到页面上,就是创建元素然后上树的过程
for (var i = 0; i < food.length; i++) {
str +=
["<tr>",
"<td>" + obj.name + "</td>",
"<td>" + food[i].name + "</td>",
"<td>" + food[i].price + "</td>",
"</tr>"].join("");
}
}
tbody.innerHTML = str;
</script>
</body>
</html>
功能添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 500px;
margin: 0 auto;
text-align: center;
}
.caozuo {
width: 500px;
margin: 0 auto;
height: 20px;
display: flex;
}
.caixi {
flex: 2;
min-width: 0;
}
.caiming {
flex: 2;
min-width: 0;
}
.jiage {
flex: 1;
min-width: 0;
}
.tianjia {
flex: 1;
min-width: 0;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>菜系</th>
<th>菜名</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="caozuo">
<input class="caixi" id="caixi">
<input class="caiming" id="caiming">
<input class="jiage" id="jiage">
<input class="tianjia" id='addBtn' type="button" value="添加">
</div>
<script>
// 获取元素
var caixi = document.getElementById("caixi");
var caiming = document.getElementById("caiming");
var jiage = document.getElementById("jiage");
var addBtn = document.getElementById("addBtn");
// 添加事件给addBtn
addBtn.onclick = function () {
// 获取菜系菜名价格
var cx = caixi.value;
var cm = caiming.value;
var jg = jiage.value;
var obj = {
type_id: 3,
name: cx,
food: [
{
food_id: 6,
name: cm,
price: jg
}
]
}
arr.push(obj);
render();
}
var arr = [
{
type_id: 1,
name: "大菜",
food: [
{
food_id: 1,
name: "鱼香肉丝",
price: 10
},
{
food_id: 2,
name: "红烧肉",
price: 10
},
{
food_id: 3,
name: "香辣粉",
price: 10
}
]
},
{
type_id: 2,
name: "中菜",
food: [
{
food_id: 4,
name: "小炒肉",
price: 13
},
{
food_id: 5,
name: "云吞",
price: 14
}
]
},
{
type_id: 3,
name: '小菜',
food: [
{
food_id: 6,
name: "雪糕",
price: 15
},
{
food_id: 7,
name: "黄瓜",
price: 16
}
]
}
]
function render() {
var tbody = document.querySelector("tbody");
var str = '';
for (var j = 0; j < arr.length; j++) {
// 获取其中一个菜系对象
var obj = arr[j];
// 获取该对象的数组属性
var food = obj.food;
// 循环数组
// 将数据展示到页面上,就是创建元素然后上树的过程
for (var i = 0; i < food.length; i++) {
str +=
["<tr>",
"<td>" + obj.name + "</td>",
"<td>" + food[i].name + "</td>",
"<td>" + food[i].price + "</td>",
"</tr>"].join("");
}
}
tbody.innerHTML = str;
}
render();
</script>
</body>
</html>
功能按分类添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 500px;
margin: 0 auto;
text-align: center;
}
.caozuo {
width: 500px;
margin: 0 auto;
height: 20px;
display: flex;
}
.caixi {
flex: 2;
min-width: 0;
}
.caiming {
flex: 2;
min-width: 0;
}
.jiage {
flex: 1;
min-width: 0;
}
.tianjia {
flex: 1;
min-width: 0;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>菜系</th>
<th>菜名</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="caozuo">
<input class="caixi" id="caixi">
<input class="caiming" id="caiming">
<input class="jiage" id="jiage">
<input class="tianjia" id='addBtn' type="button" value="添加">
</div>
<script>
var arr = [{
type_id: 1,
name: "大菜",
food: [{
food_id: 1,
name: "鱼香肉丝",
price: 10
}, {
food_id: 2,
name: "红烧肉",
price: 10
}, {
food_id: 3,
name: "香辣粉",
price: 10
}]
}, {
type_id: 2,
name: "中菜",
food: [{
food_id: 4,
name: "小炒肉",
price: 13
}, {
food_id: 5,
name: "云吞",
price: 14
}]
}, {
type_id: 3,
name: '小菜',
food: [{
food_id: 6,
name: "雪糕",
price: 15
}, {
food_id: 7,
name: "黄瓜",
price: 16
}]
}]
function render() {
var tbody = document.querySelector("tbody");
var str = '';
for (var j = 0; j < arr.length; j++) {
// 获取其中一个菜系对象
var obj = arr[j];
// 获取该对象的数组属性
var food = obj.food;
// 循环数组
// 将数据展示到页面上,就是创建元素然后上树的过程
for (var i = 0; i < food.length; i++) {
str += ["<tr>",
"<td>" + obj.name + "</td>",
"<td>" + food[i].name + "</td>",
"<td>" + food[i].price + "</td>",
"</tr>"
].join("");
}
}
tbody.innerHTML = str;
}
render();
// 获取元素
var caixi = document.getElementById("caixi");
var caiming = document.getElementById("caiming");
var jiage = document.getElementById("jiage");
var addBtn = document.getElementById("addBtn");
// 添加事件给addBtn
addBtn.onclick = function() {
// 获取菜系菜名价格
var cx = caixi.value;
var cm = caiming.value;
var jg = jiage.value;
// 定义变量用于记录是否已经存在该分类
var hasExist = false;
// 循环已有分类
for (var i = 0; i < arr.length; i++) {
if (cx === arr[i].name) {
arr[i].food.push({
name: cm,
price: jg
})
// 把变量改为true
hasExist = true;
}
}
// 通过变量进行判定
if (!hasExist) {
arr.push({
type_id: 1,
name: cx,
food: [{
food_id: 1,
name: cm,
price: jg
}]
})
}
render();
}
</script>
</body>
</html>