JSFiddle - React, Tailwind, and code Playground

by Angelo Rogério Rubin

HTML

<form action="" method="post" id="form_prepare">  
<fieldset>  
<label>
    Nome: <input type="text" name="nome" />
</label> <br/>
    
<label>Telefone: <input type="text" name="email" />
</label> <br/>
    
<label>
    Email: <input type="text" name="telefone" />
</label>  <br/>
      
            <label><input type="submit" name="ok" value="Ok" /></label>  
        </fieldset>  
    </form><!-- /form_prepare -->  

<br/>

    <table id="grid">  
        <thead>  
            <tr>  
                <th>Nome</th>  
                <th>Telefone</th>  
                <th>Email</th>  
            </tr>  
        </thead>  
        <tbody>  
        </tbody>  
    </table><!-- /grid -->

CSS

input,table,th,td,tr {
    border:1px solid #CCC;
    padding:5px;
    margin:2px;
    font-size:11px;
}

JavaScript

$(document).ready(function(){  
    $('#form_prepare').submit(function(){  
        var $this = $( this );  
  
        var tr = '<tr>'+  
            '<td>'+$this.find("input[name='nome']“).val()+’</td>’+  
            ‘<td>’+$this.find(“input[name='email']“).val()+’</td>’+  
            ‘<td>’+$this.find(“input[name='telefone']“).val()+’</td>’+  
            ‘</tr>’  
        $(‘#grid’).find(‘tbody’).append( tr );  
  
        return false;  
    });  
});