jQuery如何在表使用输入字段处追加数据

Question

I am working with a table, and I am having some issues. In most normal cases, I have 4 input fields in which I can add some data and send it to the table in my view. But if it so happens that I have more the 4 values, and I need to add more, I have added a button called "Plus" which clears previous values from the field, and waits for a user to add new ones.

So the button "Plus" adds data to table, but after pressing the button Send to table all the data disappears.

Code:

 $('.coButton').on('click', function() { $('.changeoverTable').show(); var arrNumber = new Array(); $(".changeoverTable > tbody").html(''); $('input[type=text]').each(function(i) { arrNumber.push($(this).val()); if (arrNumber[i]) { $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + arrNumber[i] + '</td></tr>'); } }) }); $('.plusButton').on('click', function() { var value = $('#opBarcode').val() console.log(value); $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + value + '</td></tr>'); $("#opBarcode").val(''); }); 

 body { background: #f5f5f5; } .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <center><input type="text" placeholder="Enter number of data"></center> <center><button class="coButton">Send to table</button></center> <center><input type="text" id="opBarcode" placeholder="Enter number of layers"><button class="plusButton">Plus</button></center> <center><button class="coButton">Send to table</button></center> <center><input type="text" placeholder="Enter number of nest"></center> <center><button class="coButton">Send to table</button></center> <center><input type="text" placeholder="Enter number of layers"></center> <center><button class="coButton">Send to table</button></center> <table class="changeoverTable hide"> <thead> <tr> <th colspan="3">Table</th> </tr> </thead> <tbody></tbody> </table> 

Answer 1

Please try this:

 function appen() { var a = $("#mytext").val(); var b = $("#lastname").val(); var c = $("#any").val(); $("#mytable tbody").append("<tr><td>" + a + "</td><td>" + b + "</td><td>" + c + "</td></tr>"); $("#mytext").val(''); $("#lastname").val(''); $("#any").val(''); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="mytext" /> <input type="text" id="lastname" /> <input type="text" id="any" /> <br /> <br /> <input type="submit" value="submit" onclick="appen()" id="submit" /> <br /> <br /> <table id="mytable"> <thead> <tr> <th>name</th> <th>lastname</th> <th>anything</th> </tr> </thead> <tbody> </tbody> </table> 

Answer 2

 $(document).ready(function(){ $('.coButton').on('click', function () { $('.changeoverTable').show(); var arrNumber = new Array(); $(".add").each(function () { $(this).remove(); }); $('input[type=text]').each(function (i) { arrNumber.push($(this).val()); if (arrNumber[i]) { if($(".changeoverTable > tbody > tr").hasClass("add_more")) { $(".changeoverTable > tbody .add_more").first().before('<tr class="add"><td>Data</td><td>' + arrNumber[i] + '</td></tr>'); }else{ $(".changeoverTable > tbody").append('<tr class="add"><td>Data</td><td>' + arrNumber[i] + '</td></tr>'); } } }) }); $('.plusButton').on('click', function () { var value = $('#opBarcode').val(); if(value){ $(".changeoverTable > tbody").append('<tr class="add_more"><td>Data</td><td>' + value + '</td></tr>'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <center><input type="text" placeholder="Enter number of data"></center> <center><button class="coButton">Send to table</button></center> <center><input type="text" id="opBarcode" placeholder="Enter number of layers"> <button class="plusButton">Plus</button></center> <center><button class="coButton">Send to table</button></center> <center><input type="text" placeholder="Enter number of nest"></center> <center><button class="coButton">Send to table</button></center> <center><input type="text" placeholder="Enter number of layers"></center> <center><button class="coButton">Send to table</button></center> <table class="changeoverTable hide"> <thead> <tr> <th colspan="3">Table</th> </tr> </thead> <tbody></tbody> </table> 

Answer 3

Run this in jsfiddle you can add as many rows without using array!

  $(document).ready(function () { var myarr = []; }); function appen() { var a = $("#mytext").val(); $("#mytable tbody").append("<tr><td>" +a+ "</td></tr>"); $("#mytext").val(''); $("#lastname").val(''); $("#any").val(''); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <input type="text" id="mytext" /> </div> <br> <br> <input type="submit" value="submit" onclick="appen()" id="submit" /> <br /> <br /> <table id="mytable"> <thead> <tr> <th>name</th> </tr> </thead> <tbody></tbody> </table>