Блог

Главная - Вопросы по программированию - JavaScript: как отображать данные в нескольких столбцах с помощью innerHTML

JavaScript: как отображать данные в нескольких столбцах с помощью innerHTML

#javascript #html #css #innerhtml

Вопрос:

У меня есть следующий код JavaScript, который вызывает API и отображает некоторые данные о продажах:

   // Get orders
  fetch(`/orders/${businessUnit}`)
    .then(response => response.json())
    .then(orders=> {
      // a Div for each order
      orders.forEach(order => {
        const element = document.createElement('div');

    element.innerHTML = `
                  <div class='orders-render'>
                  <span> ${order.buyer} </span>
                  <span> ${order.seller} </span>
                  <span> ${order.timestamp} </span>
                  </div>
              `
   
    document.querySelector('#orders-view').append(element);
  })
})
.then(orders=> {
  console.log(orders)
})
}

CSS

 .orders-render {
    border: 1px solid grey;
    border-radius: 5px;
    margin-top: 5px;
}

Данные buyer , seller , и timestamp в каждой строке отображаются очень близко друг к другу, как показано ниже:

 United States Germany 2021-07-15
China Russia 2021-07-14
Brazil Bosnia and Herzegovina 2021-07-14

Как бы я отображал данные таким образом, чтобы они были в структурированном формате столбцов, как показано ниже?

 United States   Germany                 2021-07-15
China           Russia                  2021-07-14
Brazil          Bosnia and Herzegovina  2021-07-14

Спасибо!

Комментарии:

1. Чтобы сделать таблицу, используйте <table> . (Или display: table или display: grid CSS, если вы хотите сделать это самостоятельно, но <table> он прост и доступен и точно разработан для этого случая использования.)

Ответ №1:

Вы можете добавить больше css, чтобы добавить ширину для каждого столбца, как

 .orders-render span{
  display:inline-block;
  width: 200px;
}
 
 var orders = [{buyer: 'United States', seller:  'Germany', timestamp: '2021-07-15'},
{buyer: 'China', seller: 'Russia',  timestamp: '2021-07-14'},
{buyer: 'Brazil', seller: 'Bosnia and Herzegovina', timestamp: '2021-07-14'}];
orders.forEach(order => {
        const element = document.createElement('div');

    element.innerHTML = `
                  <div class='orders-render'>
                  <span> ${order.buyer} </span>
                  <span> ${order.seller} </span>
                  <span> ${order.timestamp} </span>
                  </div>
              `
   
    document.querySelector('#orders-view').append(element);
    }); 
 .orders-render {
    border: 1px solid grey;
    border-radius: 5px;
    margin-top: 5px;
}

.orders-render span{
display:inline-block;
width: 200px;
} 
 <div id='orders-view'></div> 
 .orders-render {
    border: 1px solid grey;
    border-radius: 5px;
    margin-top: 5px;
}
The buyer, seller, and timestamp data on each line is rendered very close together, as follows:

United States Germany 2021-07-15
China Russia 2021-07-14
Brazil Bosnia and Herzegovina 2021-07-14
Метки: