jQuery how to append data at table use input fields

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>

On a different note, avoid using <center>, it's obsolete: developer.mozilla.org/en-US/docs/Web/HTML/Element/center — Pingolin
– Pingolin, Commented May 14, 2019 at 6:27
“but after pressing the button Send to table all the data disappears” - well you are not keeping that data anywhere … You empty the text input next to the Plus button after the latter was clicked, and your Send to table buttons always clear the whole table, and then rebuild it by going through the values of the text fields … If you want to rebuild the whole table all the time, then you need to keep these values added via the Plus button somewhere, so that you can insert them again the next time. Or you need to stop rebuilding the whole table each time to begin with … — 04FS
– 04FS, Commented May 14, 2019 at 6:56

Pingolin · Accepted Answer · 2019-05-14 07:31:25Z

3

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>

edited May 14, 2019 at 7:31

Pingolin

3,4677 gold badges29 silver badges43 bronze badges

answered May 14, 2019 at 6:20

Ricky

5083 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

qunz666 Over a year ago

Did you read description, i can add data to table, and this working, but when i add data to table used button "Plus" data is disappear

Ricky Over a year ago

ohh i missed that sorry

Ricky Over a year ago

tell me what is the purpose of your plus button?what you exactly want?

qunz666 Over a year ago

so, for example i have 4 input fields, but at same time i have 7 values, so at input field #2 i can add additional value to table using button Plus

qunz666 Over a year ago

But if u will check the code, u will see the button Plus add data to table, but when u will press Send to table, this data will disappear

|

Shivendra Singh · Accepted Answer · 2019-05-14 08:05:31Z

$(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>

Ricky · Accepted Answer · 2019-05-14 07:24:23Z

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>

Collectives™ on Stack Overflow

jQuery how to append data at table use input fields

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related