今回は table への操作処理の第1弾として table に行を追加する方法について説明します。
■このページの内容
■tr タグを文字列として作成しそれをそのまま行追加する
table の最終行への追加は tbody オブジェクトの append メソッドを使用します。 また、先頭行の前への追加は tbody オブジェクトの prepend メソッドを使用します。
以下のソースでは「id="btn1"」のボタンクリックイベントで最終行への追加を行い、 「id="btn2"」のボタンクリックイベントで先頭行の前への追加を行います。 尚、追加される行の中身はテストなので固定としています。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery add</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>品名</th>
<th>数量</th>
<th>単価</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>りんご</td>
<td>2</td>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>みかん</td>
<td>5</td>
<td>50</td>
<td>250</td>
</tr>
<tr>
<td>いちご</td>
<td>3</td>
<td>250</td>
<td>750</td>
</tr>
</tbody>
</table>
<button id="btn1">最終行に追加</button>
<button id="btn2">先頭に追加</button>
<script>
$(function () {
//<button id="btn1">のクリックイベントの関数を宣言
$("#btn1").click(function(){
//最終行に"<tr><td>～</td></tr>"の文字列を追加
var str = "";
str += "<tr>";
str += " <td>その他１</td>";
str += " <td>10</td>";
str += " <td>100</td>";
str += " <td>1000</td>";
str += "</tr>";
$('table tbody').append(str);
});
//<button id="btn2">のクリックイベントの関数を宣言
$("#btn2").click(function(){
//先頭に"<tr><td>～</td></tr>"の文字列を追加
var str = "";
str += "<tr>";
str += " <td>その他２</td>";
str += " <td>10</td>";
str += " <td>100</td>";
str += " <td>1000</td>";
str += "</tr>";
$('table tbody').prepend(str);
});
});
</script>
</body>
以下で動作の様子が分かります。
| 品名 | 数量 | 単価 | 金額 |
|---|---|---|---|
| りんご | 2 | 100 | 200 |
| みかん | 5 | 50 | 250 |
| いちご | 3 | 250 | 750 |
■table 最終行のコピーを行追加する
table の最後の行を取得するにはセレクタで tbody の後に tr:last-child を追加することで、 その行のオブジェクトが取得できます。 その後、そのオブジェクトのクローンを作成し tbody の append メソッドで追加します。
上記の append メソッドの引数は文字列でしたが、今回は jqueyオブジェクト を渡しています。 このメソッドは 文字列、DOM Element および jqueyオブジェクト 何れでも動作します。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery add2</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>品名</th>
<th>数量</th>
<th>単価</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>りんご</td>
<td>2</td>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>みかん</td>
<td>5</td>
<td>50</td>
<td>250</td>
</tr>
<tr>
<td>いちご</td>
<td>3</td>
<td>250</td>
<td>750</td>
</tr>
</tbody>
</table>
<button id="btn1">最終行に追加</button>
<script>
$(function () {
//<button id="btn1">のクリックイベントの関数を宣言
$("#btn1").click(function(){
//最終行のjqueryオブジェクト取得
var obj = $("table tbody tr:last-child").clone(true);
//最後尾にjqueryオブジェクト追加
$('table tbody').append(obj);
});
});
</script>
</body>
以下で動作の様子が分かります。
| 品名 | 数量 | 単価 | 金額 |
|---|---|---|---|
| りんご | 2 | 100 | 200 |
| みかん | 5 | 50 | 250 |
| いちご | 3 | 250 | 750 |
■table に非表示のテンプレート行を持って最終行のコピーを行追加する
table の先頭にテンプレートとなる行を設けます。この行のスタイルは非表示にしておきます。
後は最終行のコピーを追加する時の様に、テンプレート行のオブジェクトを取得し、table の最後に追加してやります。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery add2</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>品名</th>
<th>数量</th>
<th>単価</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr id="RowTemplate" style="display: none;">
<td>なし</td>
<td>2</td>
<td>50</td>
<td>100</td>
</tr>
<tr>
<td>りんご</td>
<td>2</td>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>みかん</td>
<td>5</td>
<td>50</td>
<td>250</td>
</tr>
<tr>
<td>いちご</td>
<td>3</td>
<td>250</td>
<td>750</td>
</tr>
</tbody>
</table>
<button id="btn1">最終行に追加</button>
<script>
$(function () {
//<button id="btn1">のクリックイベントの関数を宣言
$("#btn1").click(function(){
//テンプレート行のjqueryオブジェクト取得
var obj = $('#RowTemplate').clone();
//非表示スタイルを表示にする
obj.show();
//最後尾にjqueryオブジェクト追加
$('table tbody').append(obj);
});
});
</script>
</body>
| 品名 | 数量 | 単価 | 金額 |
|---|---|---|---|
| りんご | 2 | 100 | 200 |
| みかん | 5 | 50 | 250 |
| いちご | 3 | 250 | 750 |
PR
コメント