CODEWITHSUNDEEP
javascriptjquery
Joey Cavazos
Joey Cavazos

Reputation: 59

Dynamically inserting HTML row with jQuery not working

I am trying to dynamically insert a row into a HTML table with jQuery. With the below code, the row appears and immediately disappears. What is the problem?

$(document).ready(function(){
    var html = '<tr><td id="employee">Joey Cavazos</td><td class="satBr">6:30</td><td class="satDin">off</td><td class="sunBr">9:00</td><td class="sunDin">off</td><td class="monBr">off</td><td class="monDin">off</td><td class="tueBr">off</td><td class="tueDin">4:00</td><td class="wedBr">8:00</td><td class="wedDin">off</td><td class="trBr">8:00</td><td class="trDin">off</td><td class="friBr">off</td><td class="friDin">4:00</td> </tr>'
    $('#nameSubmit').click(function(){
    $('#schedBody tr').last().after(html);
});
});
<form>
    <input type="submit" id="nameSubmit" value="submit">
</form>
<table id="schedBody">

</table>

Upvotes: 0

Views: 52

Answers (2)

Sherali Turdiyev
Sherali Turdiyev

Reputation: 1743

There isn't tr in your html code(inside of table). So, you should put <tr></tr> tag into table 

$(document).ready(function() {
  var html = '<tr><td id="employee">Joey Cavazos</td><td class="satBr">6:30</td><td class="satDin">off</td><td class="sunBr">9:00</td><td class="sunDin">off</td><td class="monBr">off</td><td class="monDin">off</td><td class="tueBr">off</td><td class="tueDin">4:00</td><td class="wedBr">8:00</td><td class="wedDin">off</td><td class="trBr">8:00</td><td class="trDin">off</td><td class="friBr">off</td><td class="friDin">4:00</td> </tr>';
  $('#nameSubmit').click(function() {
    $('#schedBody tr').last().after(html);
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form>
   <input type="submit" id="nameSubmit" value="submit">
</form>
<table id="schedBody">
   <tr><td>...<td>...</tr>
</table>

Upvotes: 0

Rudi
Rudi

Reputation: 2995

$(document).ready(function () {
    var html = '<tr>...</tr>';

    $('form').on('submit', function (e) {
        $('#schedBody').append(html);
        e.preventDefault();
    });
});

Upvotes: 1

Related Questions