[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 city = ["東京","大阪","横浜"]; const cft = $("<table><tbody>"); for (let i = 0; i < 2; i++) { $("<tr><td>" + parseInt(i+40) + "</td><td>" + city[i] + "</td></tr>").appendTo(cft); } $("</tbody></table>").appendTo(cft); $("#cft").append(cft); }); </script> </head> <body> <div id="cft"></div> </body> </html>
実行結果
2行2列のテーブルを作成します。背景色は「yellowになります。