How to append rows to a table using jQuery?

Question

using jquery, I'm trying to add to a new row in a html table whatever the user input to the form . the form also have validation using php. validation works but displaying the inputs in the table don't. the new row of data will show only for a split seconds. i dont know what's the error cause Im new to jquery and php...

<?php 

    //declaring variables to null
    $f_name = $l_name = $email = '';
    $f_nameERR = $l_nameERR = $emailERR ='';


// On submitting form below function will execute.

if ($_SERVER["REQUEST_METHOD"] == "POST") {

if (empty($_POST["fname"])) {
$f_nameERR = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>First name is required </div>";
} else {
$f_name = $_POST["fname"];
}


if (empty($_POST["lname"])) {
$l_nameERR = "<div class='alert alert-danger alert-dismissible' role='alert'> <button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>Last Name is required </div>";
} else {
$l_name = $_POST["lname"];
}

if (empty($_POST["email"])) {
$emailERR = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>Email Address is required </div>";
} else {
$email = $_POST["email"];
}


}
     ?>

I used Bootsrap in creating the form and table

<div class="container">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>

<div class="container">
<ol class="breadcrumb">
<li><a href="#">Home</a></li>

<div class="container">
<div class="row">
    <div class="col-sm-3" style="padding:25px 25px 25px;">
        <div class="alert alert-info" role="alert"> <p>Fill out the form below and click the 'Add' button</p></div>
        <form method="post" id="post_data">
            <div class="form-group">
                <label for="first_name">First </label>
                <input type="text" id="fname" class="form-control" name="fname"  placeholder="Enter First Name">
            </div>
            <div class="form-group">
                <label for="first_name">Last </label>
                <input type="text" id="lname" class="form-control" name="lname"  placeholder="Enter Last Name">
            </div>
            <div class="form-group">
                <label for="email_add">E-mail Address</label>
                <input type="email" id="email" class="form-control" name="email"  placeholder="Enter Email">
                <p> We'll never share your email with anyone else.</p>
            </div>
            <button class="btn-primary" type="submit" id="mySubmit" value="submit">Submit</button>
        </form>

    <div class="col-sm-9" style="padding:25px 25px 25px;">
    <?php echo $f_nameERR; ?>
    <?php echo $l_nameERR; ?>
    <?php echo $emailERR; ?>

<hr>
        <table class="table" id="table">
<thead>
        <tr style="background-color: #696969; color:white">
          <th > # </th>
          <th> First</th>
          <th> Last </th>
          <th> E-mail </th>
        </tr>  
</thead>              


<tfoot>


</tfoot>


    </table>

    </div>

</div>

and my Jquery

<script src="vendors/jquery-3.3.1.js">  </script> 
<script src="vendors/bootstrap/js/bootstrap.js"></script>
<script>
  $(document).ready(function () {
  var counter =1;
$("#addrow").on("click", function () {


    var _fname = $("#f_name").val();
    var _lname = $("#l_name").val();
    var _email = $("#e_mail").val();



    $("#table > tbody:last").after('<tr><td>' +counter+ '</td><td>'+ _fname +'</td><td>' +_lname+ '</td><td>' +_email+ '</td></tr>');
      counter++;
});

});


$('#myAlert').on('closed.bs.alert', function () {


});






</script>

Answer 1

You should have the tbody first then append the rows there, you can loop the result and append it to the table tbody

this causing the problem, wrong id was used in jquery

  var _fname = $("#f_name").val();  should be $("#fname").val(); 
  var _lname = $("#l_name").val();  should be $("#lname").val(); 
  var _email = $("#e_mail").val();  should be $("#email").val(); 

 $(document).ready(function(){ $("#table > thead").after('<tbody></tbody>'); for(var i = 0; i < 3; i++ ) { $("#table tbody").append('<tr><td>'+i+'</td><td>Juan_'+i+'</td><td>Delacruz</td><td>juandelacruz_'+i+'@gmail.com</td></tr>'); } }); 

 table{width:100%; border-collapse: collapse;} thead{background-color:#eee;} th, td{padding:5px; text-align:left; border:solid 1px #f1f1f1;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- You should have the tbody first then append the rows there --> <table id="table"> <thead> <tr> <th>ID</th><th>First name</th><th>Last name</th><th>Email</th> </tr> </thead> <tfoot> </tfoot> </table>