Question

使用jquery，我正在尝试添加到html表中的新行，无论用户输入表单。表单也使用PHP进行验证。验证工作但显示表中的输入不起作用。新行数据仅显示一秒钟。我不知道是什么错误导致我对jquery和php新...

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

我使用Bootsrap创建表单和表格

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

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

和我的Jquery

{{1}}

Answer 1

你应该首先拥有tbody然后在那里附加行，你可以循环结果并将其附加到表tbody

导致问题，在jquery中使用了错误的id

  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();

＆＃13;

$(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>');

}

});

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用jQuery将行追加到表中？

1 个答案: