我只编程了大约一个月，我试图将表单的输出放到表格中，我试图在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>
答案 0 :(得分：1)
preventDefault()阻止事件冒泡
function makeBooking(e){
e.preventDefault()
var aptTime = document.getElementById('apt_time').value;
var colleagueName = document.getElementById('col_name').value;
var aptBlock = document.getElementById(colleagueName + aptTime);
aptBlock.innerHTML = colleagueName + aptTime;
}