1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h2>단가 x 수량 일람표</h2> <table border="1" id="table1"> <tr> <th>개수</th> <th>제품 A</th> <th>제품 B</th> <th>제품 C</th> </tr> </table> <script type="text/javascript"> var A = 300; var B = 450; var C = 520; var table1 = document.getElementById("table1"); for(i = 1 ; i<=10 ; i++){ var row = document.createElement("tr"); var col = document.createElement("td"); var col_value = document.createTextNode(i); col.appendChild(col_value); row.appendChild(col); col = document.createElement("td"); col_value = document.createTextNode((A*i)+"원"); col.appendChild(col_value); row.appendChild(col); col = document.createElement("td"); col_value = document.createTextNode((B*i)+"원"); col.appendChild(col_value); row.appendChild(col); col = document.createElement("td"); col_value = document.createTextNode((C*i)+"원"); col.appendChild(col_value); row.appendChild(col); table1.appendChild(row); } </script> </body> </html> | cs |
'IT Study > Web' 카테고리의 다른 글
| [JavaScript] DOM (0) | 2018.08.06 |
|---|---|
| [JavaScript] Node 응용 예제 2 (0) | 2018.08.06 |
| [JavaScript] 기본 문법 - Node관련 예제 (0) | 2018.08.06 |
| [JavaScript] 기본 문법 - key이벤트, mouse이벤트, onBlur (0) | 2018.08.06 |
| [JavaScript] 응용 예제 - onmosueover, onmouseout (0) | 2018.08.06 |