SaaS・業務
一括選択
行チェックボックスと「全選択」で複数行を選び、1件以上選択すると削除・複製の一括操作バーがスライドインする。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="bs-wrap">
<div class="bs-table-wrap">
<table class="bs-table">
<thead>
<tr>
<th class="bs-th-check">
<input type="checkbox" id="bs-all" class="bs-checkbox" aria-label="全選択" />
</th>
<th>タスク名</th>
<th>担当</th>
<th>状態</th>
</tr>
</thead>
<tbody id="bs-tbody">
<tr data-row="1">
<td><input type="checkbox" class="bs-checkbox bs-row-cb" aria-label="選択" /></td>
<td>ワイヤーフレーム</td>
<td>田中</td>
<td><span class="bs-badge wip">進行中</span></td>
</tr>
<tr data-row="2">
<td><input type="checkbox" class="bs-checkbox bs-row-cb" aria-label="選択" /></td>
<td>インタビュー</td>
<td>鈴木</td>
<td><span class="bs-badge done">完了</span></td>
</tr>
<tr data-row="3">
<td><input type="checkbox" class="bs-checkbox bs-row-cb" aria-label="選択" /></td>
<td>プロト検証</td>
<td>佐藤</td>
<td><span class="bs-badge todo">未着手</span></td>
</tr>
<tr data-row="4">
<td><input type="checkbox" class="bs-checkbox bs-row-cb" aria-label="選択" /></td>
<td>レビュー</td>
<td>山田</td>
<td><span class="bs-badge todo">未着手</span></td>
</tr>
</tbody>
</table>
</div>
<div class="bs-bar hidden" id="bs-bar" role="toolbar" aria-label="一括操作">
<span class="bs-bar-count" id="bs-bar-count">0件選択中</span>
<div class="bs-bar-actions">
<button class="bs-bar-btn danger" id="bs-delete-btn">削除</button>
<button class="bs-bar-btn" id="bs-dup-btn">複製</button>
</div>
</div>
</div>