[英]How I could make a table content from user inputs with Jquery?
我想制作一個包含用戶輸入的表格並對它們進行分類我確實初始化了這段代碼，但是如果您進行了很多輸入並以一種奇怪的方式顯示，那么內容會一直顯示在一邊
$(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>
試試這個：
$(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>
當您使用 jquery 選擇器$("tr")或$("td") ，分別選擇所有（不是最后一個） tr和td標簽。 如果你想在數據里面添加三個td tr ，你應該創建1個tr，3個td，在每個td中附加數據，然后在tr中附加每個td，然后在頁面上附加tr。 並且您應該為 tbody 標簽添加 id 以選擇像#tbody ( https://developer.mozilla.org/en/docs/Web/CSS/CSS_Selectors ) 例如：
$(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>
理解您的問題有點困難，但我猜您想將表單數據添加到表格中。 我會這樣做。 請注意，我已在您的表中添加了一個 id。 我還使用反引號“不是常規撇號”符號來從表單中獲取值。
<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>
我如何通過使用自定義輸入獲取用戶輸入的行數和列數來使用js在網站上制作表格
[英]How can i make a table on a website using js by taking user inputs of number of rows and columns with custom inputs
如何從文本字段中獲取用戶輸入，並在Google腳本中將其設置為變量？
[英]How do I take user inputs from a textfield and make them variables in a Google Script?
如何使用來自 HTML 的用戶輸入在 Javascript 中制作確認頁面
[英]How to make a confirmation page in Javascript with a user's inputs from HTML
我如何制作一個帶有輸入的數組，然后將其傳遞給另一個 function jQuery
[英]How do I make an array with inputs and then pass it to another function jQuery
如何根據來自 2 個不同組件的用戶輸入更新表數據
[英]How to update a table data based on user inputs from 2 different components
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.