반응형
크 이거 만들라고 한 일주일은 고생 크
주요 포인트는
'입력해야하는 줄은 랜덤인데 안쓴 칸은 아무것도 출력 안되게 하는거' 였음
근데 예전에 짠거는 아무것도 안쓴칸이 아무것도 출력 안되야하는데
'빈칸'으로도 나오는거임 아오
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table {border-collapse: collapse;} table,tr,td{border: 1px solid #333; padding: 5px;} input[type='text'] {width: 350px; margin-bottom: 5px; padding: 10px; font-size: 14px;} </style> </head> <body> <input type="text" placeholder="예) 총장 가슴둘레 허리둘레(띄어쓰기 주의)"><br> <input type="text" placeholder="예) 90 100 200(띄어쓰기 주의)"><br> <input type="text" placeholder="예) 100 300 400(띄어쓰기 주의)"><br> <input type="text" placeholder="예) 110 500 600(띄어쓰기 주의)"><br> <button type="button" onclick="btn()">click</button> <p></p> <script> function btn() { var material0 = document.getElementsByTagName('input')[0].value // input에 쓴 값을 변수로 저장(총장 가슴둘레) material0 = material0.split(' '); // 띄어쓰기 단위로 변수를 나눠줌{총장,가슴둘레} var material_an0 = ''; for (i = 0; i < material0.length; i++) { // input에 쓴 값 개수만큼 반복문 돌아감(2개) if (material0 == '') { // 근데 만약 input에 아무것도 안썼다면(value값이 빈칸이라면) material_an0 = ''; // 아무것도 출력하지 않기 } else { // 만약 제대로 값을 썼다면 material_an0 += '<th>' + material0[i] + '</th>'; // <th></th>태그 안에 값이 순서대로 하나씩 들어감(총장|가슴둘레) } }; var material1 = document.getElementsByTagName('input')[1].value material1 = material1.split(' '); var material_an1 = ''; for (i = 0; i < material1.length; i++) { if (material1 == '') { material_an1 = ''; } else { material_an1 += '<td>' + material1[i] + '</td>'; } }; var material2 = document.getElementsByTagName('input')[2].value material2 = material2.split(' '); var material_an2 = ''; for (i = 0; i < material2.length; i++) { if (material2 == '') { material_an2 = ''; } else { material_an2 += '<td>' + material2[i] +'</td>'; } }; var material3 = document.getElementsByTagName('input')[3].value material3 = material3.split(' '); var material_an3 = ''; for (i = 0; i < material3.length; i++) { if (material3 == '') { material_an3 = ''; } else { material_an3 += '<td>' + material3[i] +'</td>'; } }; document.getElementsByTagName('p')[0].innerHTML = '<table><tr><th>size(cm)</th>' + material_an0 + '</tr><tr>' + material_an1 + '</tr><tr>' + material_an2 + '</tr><tr>' + material_an3 + '</tr></table>'; } </script> </body> </html> | cs |
'Javascript' 카테고리의 다른 글
| 자바스크립트 : 배열에서 서로 값 바꾸고 싶을때 (0) | 2019.12.18 |
|---|---|
| 자바스크립트 : 원하는 특정 문자 바꾸기 (0) | 2018.09.27 |
| 자바스크립트 입력한 값만 출력하기 (0) | 2018.09.18 |
| 제이쿼리, 자바스크립트를 이용한 간단한 탭 (0) | 2018.08.13 |
| 자바스크립트 문제 6 (0) | 2018.05.22 |
모든 게시물(특히 과거 게시물)은 잘못된 방법으로 처리한것을 좋다고 써놨을 수 있습니다. 참고만 하시고 틀린게 있다면 댓글 남겨주세요~