Làm thế nào để hiển thị dữ liệu dạng bảng trong JavaScript?

Có nhiều cách để hiển thị dữ liệu dạng bảng trong JavaScript. Dưới đây là một số phương pháp:

• Sử dụng HTML và CSS: Bạn có thể sử dụng HTML để tạo bảng và CSS để tùy chỉnh giao diện của bảng. Ví dụ:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

• Sử dụng JavaScript và HTML: Bạn có thể sử dụng JavaScript để tạo bảng và thêm nó vào HTML. Ví dụ:

<div id="table-container"></div>

<script>
  var data = [
    { name: 'John', age: 25, city: 'New York' },
    { name: 'Jane', age: 30, city: 'London' }
  ];

  var table = document.createElement('table');
  var thead = document.createElement('thead');
  var tbody = document.createElement('tbody');

  var headRow = document.createElement('tr');
  ['Name', 'Age', 'City'].forEach(function(el) {
    var th = document.createElement('th');
    th.appendChild(document.createTextNode(el));
    headRow.appendChild(th);
  });
  thead.appendChild(headRow);

  data.forEach(function(el) {
    var tr = document.createElement('tr');
    for (var o in el) {
      var td = document.createElement('td');
      td.appendChild(document.createTextNode(el[o]))
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  });

  table.appendChild(thead);
  table.appendChild(tbody);
  document.getElementById('table-container').appendChild(table);
</script>

• Sử dụng thư viện bên ngoài: Có nhiều thư viện JavaScript như DataTables, Handsontable, hoặc Grid.js có thể giúp bạn hiển thị dữ liệu dạng bảng một cách dễ dàng và tùy chỉnh được nhiều hơn. Ví dụ:

<div id="table-container"></div>

<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">

<script>
  var data = [
    { name: 'John', age: 25, city: 'New York' },
    { name: 'Jane', age: 30, city: 'London' }
  ];

  $(document).ready(function() {
    $('#table-container').DataTable({
      data: data,
      columns: [
        { title: 'Name', data: 'name' },
        { title: 'Age', data: 'age' },
        { title: 'City', data: 'city' }
      ]
    });
  });
</script>