0

Hey guys i am not sure how to display my javascript program output in a table by not altering the html code, right now the output looked![enter image description here][1] left-aligned, i want to make the name goes underneath CUSTOMER NAME, and child goes underneath CHILD/ADULT, but right now when i added in the javascript program it does not work. thanks for your help 

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 
  }

Improve this question
4
  • Please define "it does not work". Commented Jan 5, 2015 at 18:56
  • just edited the code Commented Jan 5, 2015 at 19:02
  • Please edit the text, what happens instead of that you've expected? Commented Jan 5, 2015 at 19:04
  • when you add a customer, e.g Tom Child, the string does not appear underneath the title on the top CUSTOMER NAME, CHILD/ADULT, i want to display them in a table, so that the result looks tidier. right now Tom Child and the delete button appears cluster together on the left, i want to have three column. Commented Jan 5, 2015 at 19:10

2 Answers 2

Reset to default
2

You need to be using <table><tbody>...</tbody></table> tags to wrap your table. Just putting in table rows and columns by themselves won't work. Also you'll need to change the margins of the table so that it is centered (0 auto sets the left and right margins to auto which centers it).

That would change your JavaScript to be something like:

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 
  }
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

u mean in html or javascript? i can't altered the html code. only javascript
Well, you are changing the innerHTML using JavaScript. I've added the edited displayCustomers() function.
Move the closing '</tbody></table>' tags out of the for loop.
i tired this and only the first row is correct for some reason ?
and the title row went all the way to the left
|
1

you're not constructing your table properly; there's no <table> element, and your table header is just tabbed/whitepsace positioned. Put those in a table header. Also, you should be checking the customer list size instead of the previous contents of your message string.

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 
  }
Improve this answer

3 Comments

the title now go all the way to the left now
u mean use centre-align in javascript?
no, add style="text-align: center;" to the th tags, or put the styles into your stylesheet for the page

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.