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=".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>

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./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>

• javascript
• jquery
• html
• css

• On a different note, avoid using <center>, it's obsolete: developer.mozilla/en-US/docs/Web/HTML/Element/center – Pingolin Commented May 14, 2019 at 6:27
• @Armel it's only to present code here – qunz666 Commented May 14, 2019 at 6:28
• “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 Commented May 14, 2019 at 6:56

3 Answers 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./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>

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

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./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>