Question

嘿家伙我不知道如何通过不改变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>&nbsp;CUSTOMER NAME&nbsp;</b>\t\t<b>&nbsp;CHILD/ADULT&nbsp;</b></p>'; 

    for (var i = 0; i < customerList.length; i++)
      {
        message += '&nbsp; '+ String(customerList[i].name) + '; //name message
        message += ' + String(customerList[i].childOrAdult) + '&nbsp; //status message 
        message += '<button onclick="removeCustomer(' + i + ')">Remove this customer</button></td></tr>'; //add delete button 
      }
      
      }

    	document.getElementById('outputDiv').innerHTML = message; //display message 
  }

Answer 1

您需要使用<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 
  }

Answer 2

你没有正确地建造你的桌子;没有<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 
  }

在javascript中显示表而不改变html

2 个答案: