#初めに
ジャバスクリプトにはクラス定義を行う（プロパティ、メソッド）
#html、 javasriptのツールの開発
→オンラインツールを使えるため、ツールのダウンロードが不要です。
https://jsfiddle.net/
#テーブルに対して（例１）
「追加」ボタンをクリックすると、「サンプルテキスト」行が追加されている
①「行」クラスを定義する
②「追加」ボタンをクリックすると、「行」のインスタンスクラスを生成し、行の追加のメソッドをよぶ
①HTML分に以下のHTMLソースを追加する
<html>
<head>
<title>Hoge</title>
</head>
<body id="main-id">
</body>
</html>
②JQUERYを選択してから、JAVASRIPT分に以下のソースを追加する
// マインオブジェクト
var $main = $("#main-id");
// テーブルオブジェクト
var $table = $("<table>");
// クラス定義
var Row = function(table) { // table：変数
// プロパティ
var $tr = $("<tr>"); // 行オブジェクト
var $td = $("<td>").html("サンプルテキスト"); // カラムオブジェクト
// メソッド
this.addRow = function() {
table.append($tr.append($td));
};
};
// ボタンオブジェクト
var $button = $("<button>").html("追加");
// ボタンクリックイベント
$button.click(function() {
// インスタンス作成
var row = new Row($table);
// クラスのメソッドを呼ぶ
row.addRow();
});
//親オブジェクトに子オブジェクトを追加
$main.append($button).append($table);
実行
#テーブルに対して（例２）
①HTML分に以下のHTMLソースを追加する
<html>
<head>
<title>Hoge</title>
</head>
<body id="main-id">
</body>
</html>
②JQUERYを選択してから、JAVASRIPT分に以下のソースを追加する
// マインオブジェクト
var $main = $("#main-id");
// テーブルオブジェクト
var $table = $("<table>");
// クラス定義
var Row = function(table) { // table：変数
// プロパティ
var $tr = $("<tr>"); // 行オブジェクト
var $td = $("<td>").html("インプット："); // カラムオブジェクト
var $input = $("<input>"); // インプットオブジェクト
// 追加メソッド
this.addRow = function() {
// 行を追加
table.append($tr.append($td.append($input)))
};
// 削除メソッド
this.removeRow = function() {
// 行を削除
table.find("tr:last").remove()
};
};
// ボタンオブジェクト
var $buttonAdd = $("<button>").html("追加");
// ボタンクリックイベント
// ボタンをクリックすると、行が追加される
$buttonAdd.click(function() {
// インスタンス作成
var row = new Row($table);
// クラスのメソッドを呼ぶ
row.addRow();
});
// ボタンオブジェクト
var $buttonRemove = $("<button>").html("削除");
// ボタンクリックイベント
// ボタンをクリックすると、行が削除される
$buttonRemove.click(function() {
// インスタンス作成
var row = new Row($table);
// クラスのメソッドを呼ぶ
row.removeRow();
});
//親オブジェクトに子オブジェクトを追加
$main.append($buttonAdd).append($buttonRemove).append($table);
実行
#ディブに対して
①HTML分に以下のHTMLソースを追加する
<html>
<head>
<title>Hoge</title>
</head>
<body id="main-id">
</body>
</html>
②JQUERYを選択してから、JAVASRIPT分に以下のソースを追加する
// マインオブジェクト
var $main = $("#main-id");
// divオブジェクト
var $div = $("<div>");
// クラス定義
var Row = function(div) { // div：変数
// divプロパティ
var $span = $("<span>").html("タイトル"); // liブジェクト
// divプロパティ
var $div = $("<div>").html("サンプルテキスト"); // divブジェクト
// メソッド
this.addRow = function() {
div.append($span).append($div);
};
};
// ボタンオブジェクト
var $button = $("<button>").html("追加");
// ボタンクリックイベント
$button.click(function() {
// インスタンス作成
var row = new Row($div);
// クラスのメソッドを呼ぶ
row.addRow();
});
//親オブジェクトに子オブジェクトを追加
$main.append($button).append($div);
実行
#ul,liに対して
①HTML分に以下のHTMLソースを追加する
<html>
<head>
<title>Hoge</title>
</head>
<body id="main-id">
</body>
</html>
②JQUERYを選択してから、JAVASRIPT分に以下のソースを追加する
// マインオブジェクト
var $main = $("#main-id");
// ulオブジェクト
var $ul = $("<ul>");
// クラス定義
var Row = function(ul) { // ul：変数
// プロパティ
var $li = $("<li>").html("サンプルテキスト"); // liブジェクト
// メソッド
this.addRow = function() {
ul.append($li);
};
};
// ボタンオブジェクト
var $button = $("<button>").html("追加");
// ボタンクリックイベント
$button.click(function() {
// インスタンス作成
var row = new Row($ul);
// クラスのメソッドを呼ぶ
row.addRow();
});
//親オブジェクトに子オブジェクトを追加
$main.append($button).append($ul);
実行
以上