JavaScriptを使用したBootstrapテーブルの作成方法

1. HTMLとJavaScriptを使用した基本的な方法 最初に、HTMLとJavaScriptを使用して基本的なBootstrapテーブルを作成する方法を見てみましょう。

HTMLコード:

<table id="myTable" class="table">
  <thead>
    <tr>
      <th scope="col">列1</th>
      <th scope="col">列2</th>
      <th scope="col">列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
      <td>データ3</td>
    </tr>
    <tr>
      <td>データ4</td>
      <td>データ5</td>
      <td>データ6</td>
    </tr>
  </tbody>
</table>

JavaScriptコード:

// テーブルをBootstrapに適用する
$(document).ready(function() {
  $('#myTable').DataTable();
});

この方法では、HTMLでテーブルの骨組みを作成し、JavaScriptでテーブルにBootstrapスタイルを適用しています。DataTable()関数は、テーブルをソートやページングなどの機能で強化します。

2. JSONデータを使用してテーブルを動的に生成する方法 次に、JavaScriptを使用してJSONデータを読み込み、動的にテーブルを生成する方法を見てみましょう。

HTMLコード:

<table id="myTable" class="table">
  <thead>
    <tr>
      <th scope="col">名前</th>
      <th scope="col">年齢</th>
      <th scope="col">メール</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScriptコード:

// JSONデータ
var data = [
  {
    "name": "John Doe",
    "age": 25,
    "email": "[email protected]"
  },
  {
    "name": "Jane Smith",
    "age": 30,
    "email": "[email protected]"
  },
  // 追加のデータ...
];
// テーブルを生成する関数
function generateTable() {
  var tbody = document.querySelector('#myTable tbody');
  tbody.innerHTML = '';
  data.forEach(function(item) {
    var row = document.createElement('tr');
    row.innerHTML = '<td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.email + '</td>';
    tbody.appendChild(row);
  });
}
// テーブルを生成する
generateTable();

この方法では、JSONデータをJavaScriptの配列として定義し、generateTable()関数を使用してテーブルを動的に生成しています。

これらは、JavaScriptを使用してBootstrapテーブルを作成するためのいくつかの例です。他にもさまざまな方法がありますが、基本的なアプローチとしてはこれらの例を参考にすることができます。