以下のソースコードで、<tbody id=”p2146-2-tbody”> ~ </tbody>
の範囲を「追加」、「削除」、「移動」、「変更」させたいのですが、どのようにすべきでしょうか?
現在、上手く動かせず、アドバイス頂けましたら幸いです。
何卒宜しくお願い致します。
【index.html】
<table id="p2146-2-table">
<tbody id="p2146-2-tbody">
<tr>
<th>仕入れ先A</th>
<th>仕入れ先B</th>
<th>仕入れ先C</th>
</tr>
<tr>
<td>
<select class="changeList">
<option>A</option><option>B</option><option>C</option>
</select>
</td>
<td>A</td>
<td>
<img src="up.png" alt="↑" class="upList" />上へ
<img src="down.png" alt="↓" class="downList" />下へ
</td>
</tr>
<tr>
<th>販売先A</th>
<th>販売先B</th>
<th>販売先C</th>
</tr>
<tr>
<td>
<select class="changeList">
<option>A</option><option>B</option><option>C</option>
</select>
</td>
<td>A</td>
<td>
<img src="up.png" alt="↑" class="upList" />上へ
<img src="down.png" alt="↓" class="downList" />下へ
</td>
</tr>
<tr class="text-center">
<td>
<input value="+" type="button" class="addList">
<input value="-" type="button" class="removeList">
</td>
</tr>
</tbody>
</table>
【style.css】
#p2146-2-tbody tr:first-child {
display: none;
}
【jQuery.js】
$(document).ready(function () {
// CSSで非表示にした1行目の行を複製し、その行の下に挿入
$("#p2146-2-tbody > tr").eq(0).clone(true).insertAfter($("#p2146-2-tbody > tr")).eq(0);
// 行を追加する
$(document).on("click", ".addList", function () {
$("#p2146-2-tbody > tr").eq(0).clone(true).insertAfter(
$(this).parent().parent()
);
});
// 行を削除する
$(document).on("click", ".removeList", function () {
$(this).parent().parent().remove();
});
// 行を一つ上に移動させる
$(document).on("click", "#p2146-2-tbody > tr:gt(1) .upList", function () {
var t = $(this).parent().parent();
if(t.prev("tr")) {
t.insertBefore(t.prev("tr")[0]);
}
});
// 行を一つ下に移動させる
$(document).on("click", ".downList", function () {
var t = $(this).parent().parent();
if(t.next("tr")) {
t.insertAfter(t.next("tr")[0]);
}
});
// 行の一部を変更する
$(document).on("change", ".changeList", function () {
$(this).parent().next().html($(this).val());
});
});
※追記
<tbody id=”p2146-2-tbody”> ~ </tbody>
の中の、以下全てを「追加」「削除」「移動」「変更」したいです。
<tr>
<th>仕入れ先A</th>
<th>仕入れ先B</th>
<th>仕入れ先C</th>
</tr>
<tr>
<td>
<select class="changeList">
<option>A</option><option>B</option><option>C</option>
</select>
</td>
<td>A</td>
<td>
<img src="up.png" alt="↑" class="upList" />上へ
<img src="down.png" alt="↓" class="downList" />下へ
</td>
</tr>
<tr>
<th>販売先A</th>
<th>販売先B</th>
<th>販売先C</th>
</tr>
<tr>
<td>
<select class="changeList">
<option>A</option><option>B</option><option>C</option>
</select>
</td>
<td>A</td>
<td>
<img src="up.png" alt="↑" class="upList" />上へ
<img src="down.png" alt="↓" class="downList" />下へ
</td>
</tr>
<tr class="text-center">
<td>
<input value="+" type="button" class="addList">
<input value="-" type="button" class="removeList">
</td>
</tr>
{}
ボタンを押下するとコードブロック化します。