Dynamically inserting HTML row with jQuery not working

Question

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>

you should add at least one row to your table for that script to work. Demo here: jsfiddle.net/3wndqxn7 — GrafiCode
– GrafiCode, Commented Oct 2, 2015 at 23:46
Or just replace from $('#schedBody tr').last().after(html); to $('#schedBody').append(html); — Sherali Turdiyev
– Sherali Turdiyev, Commented Oct 3, 2015 at 10:44

Rudi · Accepted Answer · 2015-10-03 07:42:24Z

1

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

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

answered Oct 3, 2015 at 7:42

Rudi

2,9851 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sherali Turdiyev · Accepted Answer · 2015-10-03 10:36:30Z

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>

Collectives™ on Stack Overflow

Dynamically inserting HTML row with jQuery not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related