My current project involves working with a table, and I have encountered some challenges along the way. Typically, I have 4 input fields where I can input data that is then sent to the table in my view. However, if I exceed 4 values and need to add more, I have included a button labeled "Plus". This button clears out previous values from the field and prompts the user to input new ones.
Once the "Plus" button is clicked, the data gets added to the table. But interestingly, after pressing the Send to table button, all the data disappears.
Here's a snippet of the 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>');
}
})
});
...
...
});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>
...
...
</table>