如何为表单中的不同选项组合生成不同的表格 [HTML/JS]答案

【问题标题】：How to generate different table for different combination of options in the form [HTML/JS]如何为表单中的不同选项组合生成不同的表格 [HTML/JS]
【发布时间】：2021-04-15 00:35:36
【问题描述】：

我正在制作用于预订电影票的简单预订系统。我有一个表格，你可以选择电影 A-E 的时间、日期、你想去电影院的时间和时间。简单的三个选项，然后提交按钮 -> 我将这些值保存在 LocalStorage 中，以便以后使用。

之后，我在电影院的桌子 -> 座位上编程。您可以单击表格单元格 -> 颜色从白色（空位）变为绿色（已选择），单击“预订”后，颜色变为红色（已预订）。表按我的意愿工作。

我的问题是，我想为所选的电影、日期和时间的每个组合生成包含所有函数的相同表。

例如->

我选择电影 A，2021 年 1 月 12 日上午 10:00，点击按钮 -> 空表生成（用我的功能来预订座位等等。）

我选择电影 A，12.01.2021，12:00 am，点击按钮 -> 空表生成（用我的功能来预订座位等等。）

每个表格都被保存，当我点击组合时，它会弹出。

我没有提供任何代码，因为我认为它没有用，因为我被困在问题的开头。

这就是它的样子。

how does it look

非常感谢，

危险

【问题讨论】：

读取How to Ask并创建minimal reproducible example

标签： javascript html forms html-table

【解决方案1】：

没有一些代码很难给出准确的答案。如果您想要相同的表格，那么您可以为表格创建一个模板，并为每个表格创建一个具有属性的对象。

表格使用模板文字，必须用反引号括起来。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

// Create an object for each movie
let movie = { 
    name: "",
    date: "",
    time: "",
    
    getTable(seats) {
        let myTable = "<table>";
        
        for(let n = 0; n < seats.length; n++) {
            myTable +=`<tr><td style="background: ${seats[n].status};">${seats[n].seatNum}</td></tr>`;
        }
        
        myTable += "</table>";
        return myTable;
    }
};

// Add properties for each movie
movie.name = "movie";
movie.date = "date";
movie.time = "time";

// Add the seats for that movie at that time and date
let seats = [
    {"seatNum": "1", "status": "white"},
    {"seatNum": "2", "status": "green"},
    {"seatNum": "3", "status": "red"}, 
    {"seatNum": "4", "status": "red"},
    {"seatNum": "5", "status": "white"},
    {"seatNum": "6", "status": "white"}
];

// Generate the table
let tbl = movie.getTable(seats);
document.getElementById("myTable").innerHTML = tbl;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
    <body>
        <div id="myTable">
        </div>
        
        <script type="text/javascript" src='test.js'></script>
    </body>
</html>

【讨论】：

我刚刚用代码做了更好的解释：stackoverflow.com/questions/65656670/…