javascript - How to generate different table for different combination of options in the form [HTML/JS]

Question

Welcome To Ask or Share your Answers For Others

javascript - How to generate different table for different combination of options in the form [HTML/JS]

asked Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - How to generate different table for different combination of options in the form [HTML/JS]

I'm making simple reservation system for booking cinema tickets. I have a form, when you can choose Movie A-E, date, when you would like to go in the cinema and hour. Simple three options and then Submit button -> I save those values in the LocalStorage so I can use them later.

After that I programmed table -> seats in the cinema. You can click on the table cells -> colors are changing from white(open seat) to green(chose) and after you click on Reserve, it changes to RED(booked). Table works as I want.

My problem is, that I want to generate identical table with all the functions for every combination of Movie, Date and Time selected.

For example ->

I select Movie A, 12.01.2021, 10:00 am, click on the button -> empty table generates (with my functions to reserve seats and so on.)

I select Movie A, 12.01.2021, 12:00 am, click on the button -> empty table generates (with my functions to reserve seats and so on.)

Every table is saved and when I click back on the combination, it pops out.

I don't provide any code, because I think it would not be useful, because I am stuck in the beginning of the problem.

This is how does it look.

how does it look

Thank you vey much,

DG

question from:https://stackoverflow.com/questions/65643633/how-to-generate-different-table-for-different-combination-of-options-in-the-form

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T18:46:36+0000

It's hard to give an accurate answer without some code. If you want identical tables then you could create a template for the table and an object with the properties for each table.

The table uses template literals and must be enclosed in backticks.

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>

Categories

javascript - How to generate different table for different combination of options in the form [HTML/JS]

javascript - How to generate different table for different combination of options in the form [HTML/JS]

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags