Search code examples
javascriptjqueryhtmlhtml-tableuser-input

How I could make a table content from user inputs with Jquery?

I want to make a table that contains user inputs and classified them I did initialize this code but the contents keep show aside if you made many inputs and display in a weird way I tried so many other ways and the same problem happens help, please 

$(document).ready(function(){  
  $("#btn").click(function(){

            $("#tbody").append("<tr></tr>");
            $("tr").append("<td></td>");
            $("td").append($("#txt").val());

            $("#tbody").append("<tr></tr>");
            $("tr").append("<td></td>");
            $("td").append($("#txt2").val());


            $("#tbody").append("<tr></tr>");
            $("tr").append("<td></td>");
            $("td").append($("#txt3").val());

});
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<button id="btn">add table element</button>
<br>
<br>

<input type="text" id="txt" placeholder="Nom"  >
<br>
<br>
<input type="text" id="txt2" placeholder="Prenom">
<br>
<br>
<input type="Number" id="txt3" placeholder="Nº dossier">
<br>
<br>


<table border="1">
	
<thead>
<th>Nom</th>
<th>Prenom</th>
<th>Nº dossier</th>
</thead>
<tbody>

</tbody>
</table>


</body>
</html>

Solution

  • Try this:

    $(function(){
  
  $('#add').on('click',function(){
      
      var field1=$('#field1').val();
      var field2=$('#field2').val();
      var field3=$('#field3').val();
      
      var data=`<tr><td>`+field1+`</td>`+
                      `<td>`+field2+`</td>`+
                      `<td>`+field3+`</td></tr>`;
      $('#table').append(data);
      
    });


});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type='text' id='field1' />
<input type='text' id='field2' />
<input type='text' id='field3' />
<button id='add' >Add </button>


<table id='table'>
<tr>
  <th>Field 1 </th>
  <th>Field 2 </th>
  <th>Field 3 </th>
</tr>

</table>