jQuery がいまいち、好きになれないのは、プロジェクト毎に独特な書き方をしているのを良く見かけてしまい、
何で普遍的に書いてくれないんだと思うのだが、自分で書いても、どうも気に入らない。
table の行追加と削除をボタン操作で行うとする。
HTML は、以下のようなものがあったとする。
<div>
<input type="text" id="add_item">
<input type="button" value="追加" id="btn_add">
</div>
<br/>
<div>
<input type="button" value="先頭を削除" id="btn_top_remove">
<input type="button" value="最後を削除" id="btn_tail_remove">
</div>
<table id="target_table">
<thead>
<tr>
<th> 商 品 </th>
<th> 数 量 </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>ロクシタン</td>
<td><input type="text" name="item1" value="1" class="in_amount"></td>
<td><input type="button" value="削除" class="btn_del"></td>
</tr>
<tr>
<td>リードケース</td>
<td><input type="text" name="item2" value="2" class="in_amount"></td>
<td><input type="button" value="削除" class="btn_del"></td>
</tr>
<tr>
<td>掃除用羽根</td>
<td><input type="text" name="item3" value="4" class="in_amount"></td>
<td><input type="button" value="削除" class="btn_del"></td>
</tr>
</tbody>
</table>
画面キャプチャですが、以下のような表の <table> が表示されて
この表の行を追加したり削除したりする jQuery は、、、
$(function(){
$("#btn_add").click(function(){
var addNum = $("#target_table tbody tr").size() + 1;
$("#target_table").append(
$("<tr></tr>")
.append($("<td></td>").text($("#add_item").val()))
.append($("<td></td>").html("<input type=\"text\" name=\"item"+addNum+"\" class=\"in_amount\">"))
.append($("<td></td>").html("<input type=\"button\" value=\"削除\" class=\"btn_del\">"))
);
// id=btn_del で削除 を再設定
setDeleteRow(".btn_del");
});
// 先頭を削除
$("#btn_top_remove").click(function(){
$("#target_table tbody tr:first").remove();
});
// 最後尾を削除
$("#btn_tail_remove").click(function(){
$("#target_table tbody tr:last").remove();
});
// id=btn_del で削除
setDeleteRow(".btn_del");
});
function setDeleteRow(classname){
$(classname).click(function(){
var rowNum = $(this).parent().parent()[0].rowIndex;
if (rowNum >= 0){
$(this).parent().parent().remove();
}
});
}
行削除する処理は、なんとか普遍性があるようだが、追加はどうしよもない。。。
