javascript - 在 javascript 中显示表格而不改变 html

Question

嘿伙计们，我不知道如何通过不改变 html 代码来在表格中显示我的 javascript 程序输出，现在输出看起来![在此处输入图像描述][1] 左对齐，我想让名称位于“客户名称”下方，“ child ”位于“ child /成人”下方，但现在当我在 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>标签来包裹你的 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 
  }