在javascript中显示表而不改变html

时间:2015-01-05 18:55:22

标签: javascript

嘿家伙我不知道如何通过不改变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 
  }
  

  

2 个答案:

答案 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 
  }