Показать таблицу в javascript без изменения html

Question

Привет, ребята, я не уверен, как отобразить вывод моей программы javascript в таблице, не изменяя код html, прямо сейчас результат смотри! [Введите описание изображения здесь] [1] aligned, я хочу, чтобы имя попадало под ИМЯ КЛИЕНТА, а ребенок попал под ДЕТЯМ/ВЗРОСЛЫМ, но прямо сейчас, когда я добавил в 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 
 
     } 
 
     
 
     } 
 

 
    \t document.getElementById('outputDiv').innerHTML = message; //display message 
 
    } 
 
    
 

 

Answer 1

Вы должны использовать <table><tbody>...</tbody></table> теги, чтобы обернуть вашу таблицу. Простое размещение строк и столбцов таблицы не будет работать. Также вам нужно будет изменить поля таблицы так, чтобы она была центрирована (0 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>, и ваш заголовок таблицы расположен только на вкладке/белом месте. Поместите их в заголовок таблицы. Кроме того, вы должны проверять размер списка клиентов вместо предыдущего содержимого строки сообщения.

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 
    }