jQuery でのイベント処理のメモ。
ボタンが押された場合のクリックイベントは、.click(() => {...}) で登録します。
以下の例では、「追加」ボタンを押下すると、その直下に行を追加します。
「削除」ボタンを押すとその行を削除します。
ボタンが押された場合のクリックイベントは、.click(() => {...}) で登録します。
以下の例では、「追加」ボタンを押下すると、その直下に行を追加します。
「削除」ボタンを押すとその行を削除します。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test1</title>
</head>
<body>
<h3>jQuery でのイベント処理</h3>
<table border="1">
<tbody>
<tr>
<td><input type="text" name="memo"></td>
<td><input type="button" name="add" value="追加"></td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function add_row(btn) {
const new_row = $(`
<tr>
<td><input type="text" name="memo"></td>
<td>
<input type="button" name="add" value="追加">
<input type="button" name="del" value="削除">
</td>
</tr>
`);
// ボタンが押された行の直後の行に追加
const row = btn.parent().parent();
new_row.insertAfter(row);
// イベントハンドラ: 追加
const add_btn = new_row.find('input[name="add"]');
add_btn.click(() => { add_row(add_btn); });
// イベントハンドラ: 削除
const del_btn = new_row.find('input[name="del"]');
del_btn.click(() => { del_row(del_btn); });
}
function del_row(btn) {
// ボタンが押された行を削除
const row = btn.parent().parent();
row.remove();
}
(() => {
const add_btn = $('input[name="add"]');
add_btn.click(() => { add_row(add_btn); });
})();
</script>
</body>
</html>
