Created
September 18, 2019 11:56
-
-
Save L-Soft/e55e210199e7755e6354bffa0f8cdc2c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Table, Template</title> | |
| <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <div id="items" class="container"> | |
| <table class="table table-striped table-dark"> | |
| <thead> | |
| <tr> | |
| <th>1 동</th> | |
| <th>2 동</th> | |
| <th>3 동</th> | |
| <th>4 동</th> | |
| <th>5 동</th> | |
| </tr> | |
| </thead> | |
| <tbody id="tTable"></tbody> | |
| </table> | |
| </div> | |
| <script src="../node_modules/jquery/dist/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| // 데이터 생성, 자바스크립트에서 2차원 배열이 존재하지 않음. | |
| let data = (() => { | |
| let data = [], | |
| len = 5, | |
| iCnt = 0, | |
| jCnt = 0; | |
| for (iCnt = 0; iCnt < len; iCnt++) { | |
| data[iCnt] = []; | |
| for (jCnt = 0; jCnt < len; jCnt++) { | |
| data[iCnt][jCnt] = `${iCnt}0${jCnt}호`; | |
| } | |
| } | |
| return data; | |
| })(); | |
| // 표 생성 | |
| let template = [], | |
| tempHtml = [], | |
| iCnt = 0, | |
| jCnt = 0, | |
| len = 5; | |
| for (iCnt = 0; iCnt < len; iCnt++) { | |
| template = []; | |
| for (jCnt = 0; jCnt < len; jCnt++) { | |
| template.push(`<td>${data[iCnt][jCnt]}</td>`); | |
| } | |
| tempHtml.push(`<tr>${template.join("\n")}</tr>`); | |
| } | |
| $("#tTable").append(tempHtml.join("\n")); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment