初めに
Sakura EditorでJqueryでユーザー追加ページを作成する。
Sakura Editorのダウンロード
HTMLページを保存する
<html>
<head>
<title>タイトル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// マインオブジェクト
var $main = $("#main-id");
// テーブルオブジェクト
var $table = $("<table>");
// クラス定義
var Row = function(table) { // table：変数
// プロパティ
var $tr = $("<tr>"); // 行オブジェクト
var $td = $("<td>").html("ユーザー名："); // カラムオブジェクト
var $input = $("<input>"); // インプットオブジェクト
// ユーザー削除ボタン
var $deleteUserBtn = $("<button>").html("削除");
$deleteUserBtn.click(function() {
this.closest("tr").remove();
});
// 追加メソッド
this.addRow = function() {
// 行を追加
table.append($tr.append($td.append($input).append($deleteUserBtn)))
};
};
// ボタンオブジェクト
var $buttonAdd = $("<button>").html("ユーザー追加");
// ボタンクリックイベント
// ボタンをクリックすると、行が追加される
$buttonAdd.click(function() {
// インスタンス作成
var row = new Row($table);
// クラスのメソッドを呼ぶ
row.addRow();
});
//親オブジェクトに子オブジェクトを追加
$main.append($buttonAdd).append($table);
});
</script>
</head>
<body id="main-id">
</body>
</html>
HTMLで保存して、実行する
以上