Bootstrap 5のモーダルテーブルの作成方法

モーダルの基本的な設定: まず、モーダルを表示するためのボタンを作成します。以下は、ボタンをクリックした際にモーダルが表示される基本的なコード例です。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  モーダルを開く
</button>
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        モーダルの内容をここに記述します。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存する</button>
      </div>
    </div>
  </div>
</div>

モーダル内にテーブルを作成: 次に、モーダル内にテーブルを作成します。以下は、テーブルの基本的なコード例です。

<div class="modal-body">
  <table class="table">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列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>
</div>

モーダル内のテーブルのデータの動的な表示: もし、モーダル内のテーブルのデータを動的に表示したい場合は、JavaScriptを使用します。以下は、jQueryを使った例です。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
  $(document).ready(function() {
    // テーブルの行を追加する例
    $('#addRowButton').click(function() {
      var newRow = '<tr><td>新しいデータ1</td><td>新しいデータ2</td><td>新しいデータ3</td></tr>';
      $('#myTable tbody').append(newRow);
    });
    // テーブルの行を削除する例
    $('#deleteRowButton').click(function() {
      $('#myTable tbody tr:last').remove();
    });
  });
</script>
<div class="modal-body">
  <table class="table" id="myTable">
    <!-- テーブルのヘッダーとボディーのコードは省略 -->
  </table>
</div>
<button type="button" id="addRowButton" class="btn btn-primary">行を追加する</button>
<button type="button" id="deleteRowButton" class="btn btn-danger">行を削除する</button>

上記のコードは、Bootstrap 5を使用してモーダル内にテーブルを作成し、動的なデータの表示と編集ができるようになります。これらのコード例を使って、ブログ投稿を約1000語で作成することができます。投稿の内容は、Bootstrap 5のモーダルテーブルの作成方法やその使い方、そして上記のコード例を解説することができます。また、モーダルテーブルの利点や注意点、さらには他の便利なBootstrap 5の機能についても触れることができます。