Javascript

자바스크립트 input에 입력한 값으로 테이블 만들기

킹king 2018. 9. 20. 14:31
반응형


크 이거 만들라고 한 일주일은 고생 크


주요 포인트는

'입력해야하는 줄은 랜덤인데 안쓴 칸은 아무것도 출력 안되게 하는거' 였음


근데 예전에 짠거는 아무것도 안쓴칸이 아무것도 출력 안되야하는데 

'빈칸'으로도 나오는거임 아오



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

'Javascript'의 다른글

  • 현재글자바스크립트 input에 입력한 값으로 테이블 만들기

관련글

티스토리툴바