「jQuery」appendToメソッドでテーブルを作成する
環境
Windows 11 Pro 64bit
jquery 3.6.0
構文
const 変数名 = $(“<table><tbody>");
$(子要素のタグ)..appendTo(変数名);
appendToを使って、子要素の最後に移動します。
$(セレクター名).append(変数名);
appendを使って、指定の要素の子要素の最後に追加します。1
使用例
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
background-color:yellow;
width: 30%;
}
table td {
border: 1px solid;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
const cft = $("<table><tbody>");
for (let i = 0; i < 2; i++) {
$("<tr><td>tokyo</td><td>oosaka</td></tr>").appendTo(cft);
}
$("</tbody></table>").appendTo(cft);
$("#cft").append(cft);
});
</script>
</head>
<body>
<div id="cft"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
background-color:yellow;
width: 30%;
}
table td {
border: 1px solid;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
const cft = $("<table><tbody>");
for (let i = 0; i < 2; i++) {
$("<tr><td>tokyo</td><td>oosaka</td></tr>").appendTo(cft);
}
$("</tbody></table>").appendTo(cft);
$("#cft").append(cft);
});
</script>
</head>
<body>
<div id="cft"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
background-color:yellow;
width: 30%;
}
table td {
border: 1px solid;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
const cft = $("<table><tbody>");
for (let i = 0; i < 2; i++) {
$("<tr><td>tokyo</td><td>oosaka</td></tr>").appendTo(cft);
}
$("</tbody></table>").appendTo(cft);
$("#cft").append(cft);
});
</script>
</head>
<body>
<div id="cft"></div>
</body>
</html>
実行結果
2行2列のテーブルを作成します。背景色は「yellowになります。