使用Javascript将文本从表单放入表中，当我单击按钮时它会消失

Question

我只编写了大约一个月的编程，我正在尝试将表单的输出放入表中，所有这些都是我想用javascript编写的。

我已经让它进去了，但是一旦我点击按钮它就会消失。

如何解决此问题以便在单击后永久保留文本？

这是我的代码：

<html>
<head>
    <meta charset="utf-8"/>
    <title>Make a booking</title>
    <link rel="stylesheet" href="booking_page.css"/>
    <script type="text/javascript"> 
            var headings = new Array();
                headings[0] = "Your colleague";
                headings[1] = "CLOSED";
                headings[2] = "9:00";
                headings[3] = "9:15";
                headings[4] = "9:30";
                headings[5] = "9:45";
                headings[6] = "10:00";
                headings[7] = "10:15";
                headings[8] = "10:30";
                headings[9] = "10:45";
                headings[10] = "11:00";
                headings[11] = "11:15";
                headings[12] = "11:30";
                headings[13] = "11:45";
                headings[14] = "12:00";
                headings[15] = "12:15";
                headings[16] = "12:30";
                headings[17] = "12:45";
                headings[18] = "1:00";
                headings[19] = "1:15";
                headings[20] = "1:30";
                headings[21] = "1:45";
                headings[22] = "2:00";
                headings[23] = "2:15";
                headings[24] = "2:30";
                headings[25] = "2:45";
                headings[26] = "3:00";
                headings[27] = "3:15";
                headings[28] = "3:30";
                headings[29] = "3:45";
                headings[30] = "4:00";
                headings[31] = "4:15";
                headings[32] = "4:30";
                headings[33] = "4:45";
                headings[34] = "5:00";
                headings[35] = "5:15";
                headings[36] = "5:30";
                headings[37] = "5:45";
                headings[38] = "6:00";
                headings[39] = "6:15";
                headings[40] = "6:30";
                headings[41] = "6:45";
                headings[42] = "7:00";
                headings[43] = "7:15";
                headings[44] = "7:30";
                headings[45] = "7:45";
                headings[46] = "8:00";
                headings[47] = "8:15";
                headings[48] = "8:30";
                headings[49] = "8:45";  
                headings[50] = "CLOSED";    

            var colleague = new Array();
                colleague[0] = "Daniel - Mananger";
                colleague[1] = "Julia - Colleague";
                colleague[2] = "Michelle - Colleague";
                colleague[3] = "Peter - Colleague";

        //MAKE TABLE//
        function addTable(){
            var bookingSlots = document.getElementById('booking_slots');
            var table = document.createElement('TABLE');
            var tableBody = document.createElement('TBODY');

            table.border = 1;
            table.appendChild(tableBody);

            //table columns
            var tr = document.createElement('TR');
            tableBody.appendChild(tr);
            for(i=0;i<headings.length;i++){
                var th = document.createElement('TH');
                th.width = "auto";
                th.class = "table_header";
                th.appendChild(document.createTextNode(headings[i]));
                tr.appendChild(th);
            }

            //table rows
            for(i=0;i<colleague.length;i++){
                var tr = document.createElement('TR');
                for(j=0;j<1;j++){
                    var td = document.createElement('TD');
                    td.appendChild(document.createTextNode(colleague[i]));
                    td.id = colleague[i] + headings[j];
                    tr.appendChild(td);
                }
                for(j=1;j<(headings.length)-1;j++){
                    var colName = document.getElementById('col_name');
                    var td = document.createElement('TD');
                    td.id = colleague[i] + headings[j];
                    tr.appendChild(td);
                }
                for(j=headings.length;j<(headings.length)+1;j++){
                    var td = document.createElement('TD');
                    td.appendChild(document.createTextNode("CLOSED"));
                    td.id = colleague[i] + headings[j];
                    tr.appendChild(td);
                }
                tableBody.appendChild(tr);
            }
            bookingSlots.appendChild(table);
            colleague;
        }

        function colNameFunct(){
            var colName = document.getElementById("col_name");
            var select = createElement('SELECT');
            for(k=0;k<colleague.length;k++){
                var option = document.createElement('OPTION');
                option.appendChild(document.createTextNode(colleague[k]));
                select.appendChild(option);
            }
            colName.appendChild(select);
        }

        //MAKE A BOOKING//
        function makeBooking(){
            var aptTime = document.getElementById('apt_time').value;
            var colleagueName = document.getElementById('col_name').value;
            var aptBlock = document.getElementById(colleagueName + aptTime);
            aptBlock.innerHTML = colleagueName + aptTime;
        }

    </script>
</head>
<body onload="addTable()">
    <header>
        <img id="phone_shop_logo" href="Phone Shop logo.jpg">
    </header>

    <nav>
    </nav>

    <aside>
    </aside>

    <section>
        <form class="form" action="" method="get">
            Name:<input type="text" id="cust_name" name="cust_name"/>
            Contact number:<input type="text" id="cont_number" name="cont_number"/><br/>
            Date:<input type="date" id="apt_date" name="apt_date"/>
            Time:<input type="time" id="apt_time" name="apt_time"/>
            Colleague:<select id="col_name" name="col_name">
                <option>Daniel - Mananger</option>
                <option>Julia - Colleague</option>
                <option>Michelle - Colleague</option>
                <option>Peter - Colleague</option>
            </select>
            <br/>
            <input type="submit" id="submit_button" value="Book me in" onclick="makeBooking()"/>
        </form>
        <div id="booking_slots"/>
    </section>

    <footer id="footer">
    </footer>
</body>