Question

我正在尝试使用jQuery动态地将行插入到HTML表中。使用下面的代码，该行出现并立即消失。有什么问题？

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

Answer 1

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

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

Answer 2

你的html代码中没有tr（在表格内）。因此，您应该将<tr></tr>标记放入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>

动态插入HTML行与jQuery无法正常工作

2 个答案: