tr行を1行追加したい
解決したいこと
Dom操作を習得するためにjQueryでtable動作について触れています。
tr行に対して、td中の追加ボタンをクリックしたらクリックされた行の次の行に、同じ内容の行を1行増やしたいと考えています。
内容はinnerHTMLで置き換えるため、行の増やし方につまづいているのが相談になります。
導入環境
MacOS 12.1
fireFox 95.0.2
jquery-3.6.0.min.js
jquery-ui.min.js
Sortable.min.js"
html
<table id="dataTable" class="table table-hover table_sticky">
<thead>
<tr class="thColor">
<th scope="col" class="border-0" style="width:5%">#</th>
<th scope="col" class="border-0" style="width:30%">場所</th>
<th scope="col" class="border-0" style="width:30%">内容</th>
<th scope="col" class="border-0" style="width:10%">予想時間</th>
<th scope="col" class="border-0 text-center" style="width:10%">編集</th>
<th scope="col" class="border-0 text-center" style="width:10%">削除</th>
<th scope="col" class="border-0 text-center add" style="width:5%"><i class="fas fa-plus-circle"></i></th>
</tr>
</thead>
<tbody id="sortTable">
<tr class="bg-white shadow rounded">
<td class="listWithHandle" data-name="tenkenNumber" scope="row"></td>
<td data-name="tenkenBasho">データ1</td>
<td data-name="tenkenNaiyou">あいうえおかきくけこあいうえおかきくけこ</td>
<td data-name="tenkenYosoujikan" class="text-right">23</td>
<td class="edit text-center"><i class="fas fa-edit"></i></td>
<td class="delete text-center"><i class="fas fa-trash-alt"></i></td>
<td class="add text-center"><i class="fas fa-plus-circle"></i></td>
</tr>
<tr class="bg-white shadow rounded">
<td class="listWithHandle" data-name="tenkenNumber" scope="row"></td>
<td data-name="tenkenBasho">データ2</td>
<td data-name="tenkenNaiyou">あいうえおかきくけこあいうえおかきくけこ</td>
<td data-name="tenkenYosoujikan" class="text-right">123</td>
<td class="edit text-center"><i class="fas fa-edit"></i></td>
<td class="delete text-center"><i class="fas fa-trash-alt"></i></td>
<td class="add text-center"><i class="fas fa-plus-circle"></i></td>
</tr>
<tr class="bg-white shadow rounded">
<td class="listWithHandle" data-name="tenkenNumber" scope="row"></td>
<td data-name="tenkenBasho">データ3</td>
<td data-name="tenkenNaiyou">あいうえおかきくけこあいうえおかきくけこ</td>
<td data-name="tenkenYosoujikan" class="text-right">123</td>
<td class="edit text-center"><i class="fas fa-edit"></i></td>
<td class="delete text-center"><i class="fas fa-trash-alt"></i></td>
<td class="add text-center"><i class="fas fa-plus-circle"></i></td>
</tr>
<tr class="bg-white shadow rounded">
<td class="listWithHandle" data-name="tenkenNumber" scope="row"></td>
<td data-name="tenkenBasho">データ4</td>
<td data-name="tenkenNaiyou">あいうえおかきくけこあいうえおかきくけこ</td>
<td data-name="tenkenYosoujikan" class="text-right">123</td>
<td class="edit text-center"><i class="fas fa-edit"></i></td>
<td class="delete text-center"><i class="fas fa-trash-alt"></i></td>
<td class="add text-center"><i class="fas fa-plus-circle"></i></td>
</tr>
</tbody>
</table>
jQuery
$('.add').on('click',function(){
var trElem = $(this).parent();
trElem.clone().insertAfter();
trElem.className = "bg-white shadow rounded";
自分で試したこと
parentを使うことで、クリックされたtd内容からtr行を参照するということをconsole.logで確認が取れました。
参照しているtrを複製して、次の行に埋め込みたいことからcloneしてinsertAfterで埋め込むようなコードにしています。
参照URL(tr複製後、行追加)：
https://maku77.github.io/js/jquery/add-element.html
以下のURlからappend()やafter()でも埋め込みができるとのことでしたので使ってみましたがうまく表示されない状態です。
参照URL(appendやafterについて):
https://teratail.com/questions/38293
0
