「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>
実行結果
2行2列のテーブルを作成します。背景色は「yellowになります。