JSFiddle - React, Tailwind, and code Playground
by Fairlight
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.1.3/bootstrap-material-design.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<p>
table
</p>
<table>
<!-- <table class="table table-striped table-bordered table-hover table-sm" id="special" border="1" >-->
<!-- <thead class="thead-light" border="1" bordercolor="#aaaaaa">
<tr>
<th scope="col" hidden>ID</th>
<th style="width:80px;"></th>
<th style="width:80px;" scope="col" >商品名</th>
<th style="width:80px;" scope="col" >単価</th>
<th style="width:80px;" scope="col" >予約受付数</th>
<th style="width:80px;" scope ="col" >曜日</th>
<th style="width:60px;" scope ="col" >時刻</th>
<th style="width:80px;" scope="col"></th>
</tr>
</thead> -->
<tbody>
<tr class='spitemTR'>
<td hidden>19</td>
<td align="center">
<input type="button" class="btn btn-outline-secondary btn-sm" value="削除" id="coladd" onclick="delSPItem(this)"></td>
<td><input type="text" value="唐揚げ（月曜限定）"></td> <td><input class="price" type="number" value="1000"></td>
<td><input class="amount" type="number" value="10"></td>
<td><select class="form-control form-control-sm weekday" id="spweekDay"></select></td>
<td><select class="form-control form-control-sm rcvTime" ></td>
<td style="width:80px;" align="center"><input type="button" class="btn btn-primary btn-sm" value="更新" id="coladd" onclick="modifySpecialProductTable(this,'update')"></td></tr><tr class='spitemTR'> <td hidden>20</td> <td align="center"><input type="button" class="btn btn-outline-secondary btn-sm" value="削除" id="coladd" onclick="delSPItem(this)"></td> <td><input type="text" value="とんかつ（火曜限定）"></td> <td><input class="price" type="number" value="1000"></td> <td><input class="amount" type="number" value="10"></td> <td><select class="form-control form-control-sm weekday" id="spweekDay"></select></td> <td><select class="form-control form-control-sm rcvTime" ...