<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form action="#"> <div class="row"> <div class="small-3 columns"> <label for="lbNumero">Número:</label> </div> <div class="small-9 columns"> <input type="text" id="txtNumero" /> </div> </div> <div class="row"> <div class="small-3 columns"> <label for="lbNome">Nome:</label> </div> <div class="small-9 columns"> <input type="text" id="txtNome" /> </div> </div> <div class="row"> <div class="small-3 columns"> <label for="lbSexo">Sexo:</label> </div> <div class="small-9 columns"> <input type="radio" name="rbSexos" value="masculino" />Masculino <input type="radio" name="rbSexos" value="feminino" />Feminino </div> </div> <div class="row"> <div class="small-3 columns"> <label for="lbDataNasc">Data Nascimento:</label> </div> <div class="small-9 columns"> <input type="date" id="txtDataNasc" /> </div> </div> <div class="row"> <div class="small-3 columns"> </div> <div class="small-9 columns"> <input type="button" id="btCriarCliente" class="button small" value="Criar" /> <input type="reset" id="btCancelar" class="button small" value="Cancelar"/> </div> </div> </form> <table> <thead> <tr> <th>Numero</th> <th>Nome</th> <th>Sexo</th> <th>Data Nasc.</th> </tr> </thead> <tbody> </tbody> </table> <script id="tmplLinha" type="text/x-jsrender"> <td data-column="Numero"></td> <td data-column="Nome"></td> <td data-column="Sexo"></td> <td data-column="DataNasc"></td> </script>

.row label { text-align: right; padding-top: 8px; } .row .columns { padding: 0px 1%; } .row input[type="radio"] { margin: 12px 0px !important; } table { margin: 0px 1% 8px 1%; width: 98%; }

var clientes = []; var txtNumero = document.getElementById("txtNumero"); var txtNome= document.getElementById("txtNome"); var rbSexos = document.getElementsByName('rbSexos'); var txtDataNasc = document.getElementById("txtDataNasc"); var tmplLinha = document.getElementById("tmplLinha"); var tbody = document.getElementsByTagName("tbody")[0]; var btCriarCliente = document.getElementById("btCriarCliente"); isNullOrWhiteSpace = function (str) { return !str || str.trim().length == 0; } btCriarCliente.onclick = function () { var cliente = {}; var sexo = "" var novaLinha = document.createElement('tr'); for (var i = 0; i < rbSexos.length; i++) { if (rbSexos[i].checked) { sexo = rbSexos[i].value; } } cliente = { Numero: parseInt(txtNumero.value), Nome: txtNome.value, Sexo: sexo, DataNasc: new Date(txtDataNasc.value), } if (isNaN(cliente.Numero) || isNullOrWhiteSpace(cliente.Nome) || isNullOrWhiteSpace(cliente.Sexo) || isNaN(cliente.DataNasc.getTime())) { return; } for (var indice in clientes) { if (clientes[indice].Numero == cliente.Numero) { return; } } clientes.push(cliente); novaLinha.innerHTML = tmplLinha.innerHTML; for (var indice in novaLinha.childNodes) { var celula = novaLinha.childNodes[indice]; if (celula.nodeType == 1) { switch(celula.dataset.column) { case "Numero": celula.innerHTML = cliente.Numero.toString(); break; case "Nome": celula.innerHTML = cliente.Nome; break; case "Sexo": celula.innerHTML = cliente.Sexo; break; case "DataNasc": celula.innerHTML = cliente.DataNasc.toDateString(); break; } } } tbody.appendChild(novaLinha); return; }