嘿家伙我不知道如何通过不改变html代码在表格中显示我的javascript程序输出,现在输出看起来![在此处输入图像描述] [1]左对齐,我想制作名字在CUSTOMER NAME下面,并且孩子在CHILD / ADULT下面,但是现在当我在javascript程序中添加它时它不起作用。谢谢你的帮助
const MAX_CUSTOMERS = 5; //maximum customer on the trampoline is 5
var customerList = new Array(); //create new Array
function addAndDisplayCustomer() //function for add and display customer
{
var newCustomer = {}; //create new object
newCustomer.name = document.getElementById('name').value.trim(); //get name value
newCustomer.childOrAdult = childOrAdult.options[childOrAdult.selectedIndex].value; //get option value for child or adult
displayCustomers(); //display customers
}
function displayCustomers() //function for display customers
{
if (message = '')
message = '[There are currently no customers on the trampoline]'; // no customer on the trampoline
else
{
var message = '<p><b> CUSTOMER NAME </b>\t\t<b> CHILD/ADULT </b></p>';
for (var i = 0; i < customerList.length; i++)
{
message += ' '+ String(customerList[i].name) + '; //name message
message += ' + String(customerList[i].childOrAdult) + ' //status message
message += '<button onclick="removeCustomer(' + i + ')">Remove this customer</button></td></tr>'; //add delete button
}
}
document.getElementById('outputDiv').innerHTML = message; //display message
}
答案 0 :(得分:2)
您需要使用<table><tbody>...</tbody></table>
标记来包装表格。只是自己放入表行和列是行不通的。此外,您还需要更改表格的边距,使其居中(0 auto
将左右边距设置为auto,使其居中)。
这会将您的JavaScript更改为:
function displayCustomers() //function for display customers
{
if (message == '')
message = '[There are currently no customers on the trampoline]'; // no customer on the trampoline
else
{
var message = '<table style="margin: 0 auto"><thead><tr><td><b>CUSTOMER NAME</b></td>';
message += '<td><b>CHILD/ADULT</b></td><td></td></tr></thead><tbody>';
for (var i = 0; i < customerList.length; i++)
{
message += '<tr><td>'+ String(customerList[i].name) + '</td>'; //name message
message += '<td>' + String(customerList[i].childOrAdult) + '<td>'; //status message
message += '<td><button onclick="removeCustomer(' + i + ')">Remove this customer</button></td></tr>'; //add delete button
}
message+= '</tbody></table>';
}
document.getElementById('outputDiv').innerHTML = message; //display message
}
答案 1 :(得分:1)
<table>
元素,您的表格标题只是标签/ whitepsace定位。将它们放在表头中。此外,您应该检查客户列表大小,而不是消息字符串的先前内容。
function displayCustomers() { //function for display customers
// check customer list size, not the current message text
if (customerList.length > 0) {
message = '[There are currently no customers on the trampoline]'; // no customer on the trampoline
}
else {
var message = '<table><thead><tr><th>CUSTOMER NAME</th><th>CHILD/ADULT</th></tr></thead>';
message += '<tbody>';
for (var i = 0; i < customerList.length; i++) {
message += '<tr><td>'+ String(customerList[i].name) + '</td>'; //name message
message += '<td>' + String(customerList[i].childOrAdult) + '<td>'; //status message
message += '<td><button onclick="removeCustomer(' + i + ')">Remove this customer</button></td></tr>'; //add delete button
}
message += '</tbody></table>';
}
document.getElementById('outputDiv').innerHTML = message; //display message
}