How I could make a table content from user inputs with Jquery?
Question
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>
3 answers
solution1
1 ACCPTED 2019-12-29 12:05:13
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>
solution2
0 2019-12-29 12:03:17
When you use jquery selector $("tr") or $("td") , you select all(not last) tr and td tags respectively. If you want to add tr with three td inside with data, you should create 1 tr, 3 td, append data in each td, then append each td in tr, then append tr on page. And you should add id for tbody tag for selecting like #tbody ( https://developer.mozilla.org/en/docs/Web/CSS/CSS_Selectors ) For example:
$(document).ready(function(){ $("#btn").click(function(){ var raw = $('<tr></tr>'); var ceil1 = $('<td></td>').append($("#txt").val()); var ceil2 = $('<td></td>').append($("#txt2").val()); var ceil3 = $('<td></td>').append($("#txt3").val()); raw.append(ceil1).append(ceil2).append(ceil3); $('#tbody').append(raw); }); });
<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 id="tbody"></tbody> </table> </body>
solution3
0 2019-12-29 12:30:33
It is a bit difficult to understand your question, but I guess you want to add your form data to your table. I would do it this way. Notice that I have added an id to your table. I am also using backticks ` not regular apostrophe ' signs to get the values from the form.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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 id="myTable" border="1"> <thead> <tr> <th>Nom</th> <th>Prenom</th> <th>Nº dossier</th> </tr> </thead> <tbody> </tbody> </table> <script> $(document).ready(function () { $("#btn").click(function () { $("#myTable").append(` <tr> <td>${$("#txt").val()}</td> <td>${$("#txt2").val()}</td> <td>${$("#txt3").val()}</td> </tr>`) }); }); </script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.