E06-JavaScript-DOM/table.html at master · wesleyfig/E06-JavaScript-DOM · GitHub

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
<!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>Lidando com tabelas</title>
</head>
<body>
    <label for="">Digite sua tabela no campo abaixo</label><br>
    <textarea id="texto" cols="30" rows="5"></textarea><br>
    <button onclick="tabela();" style="margin-bottom: 10px">Enviar</button>
    <table id="table">
    </table>


    <script>
        function tabela(){
            var table = document.getElementById("table");
            var texto = document.getElementById("texto");
            var row = texto.value.split(' ');

            var tr = document.createElement("tr");

            for (var i=0; i<row.length; i++){
                var td = document.createElement("td");

                var node = document.createTextNode(row[i]);
                td.appendChild(node);

                var attr = document.createAttribute("style");
                attr.value = "border: 1px solid black; padding: 0px 10px;";
                td.setAttributeNode(attr);

                tr.appendChild(td);
            }
            table.appendChild(tr);
            texto.value = "";
        }
    </script>
</body>
</html>