javascript - 将新行插入表中最后一行之前

Question

早上好，

我当前正在尝试在表中插入一行，该行必须位于最后一行之前。我尝试了几种不同的方法，但似乎无法使其发挥作用。谁能告诉我哪里出错了？

我尝试使用 jQuery('table.tablesubmit tr:last').append(newRow); 并添加 .before 但它引发了错误(无法读取未定义的属性“append”)。我是 jQuery 新手，如果这真的很简单，我很抱歉。如果有更简单的解决方案，我愿意接受建议。

我已经阅读过类似的线程，但我无法使用我的具体示例来处理这些线程。

我尝试使用以下代码，虽然它添加和删除了我的行，但它的行为并不像我希望的那样。

jQuery(function() {
  var counter = 1;
  jQuery('a.pluslink').click(function(event) {
    event.preventDefault();
    var newRow = jQuery(
      '<tr><td><input class="form-control full-width" id="full-name-f1" type="text" placeholder="Project"></td>' +
      '<td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +
      '"/></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"/><td>' +
      '<input class="form-control full-width" id="full-name-f1" type="text" value="0"' +

      '/></td></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +

      '/></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +

      '/></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +

      '"/></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +
      '/></td>' + '<td><a href="#" class="minuslink">Delete</a></td></tr>');
    counter++;
    jQuery('table.tablesubmit').append(newRow);
  });
  $("table.tablesubmit").on('click', '.minuslink', function(e) {
    event.preventDefault();
    $(this).parent().parent().remove();
  });
});

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<table class="tablesubmit">
  <thead>
    <tr>
      <th width="30%">Project name</th>
      <th width="10%">Mon</th>
      <th width="10%">Tue</th>
      <th width="10%">Wed</th>
      <th width="10%">Thur</th>
      <th width="10%">Fri</th>
      <th width="10%">Sat</th>
      <th width="10%">Sun</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="BOSS">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="1.25">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="0">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="5">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="1">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="5.5">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="0">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="0">
      </td>
      <td>
        <a href="" class="minuslink">Delete</a>
      </td>
    </tr>
    <tr>
      <td class="bold" width="25%">
        <a>Total Time:</a>
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="7.25" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="8" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="7.5" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="7" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td>37.5</td>
    </tr>
  </tbody>
</table>
<a href="" class="pluslink">Add new project</a>

Answer 1

你必须使用这个 - jQuery('table.tablesubmit tr:last').before(newRow);

jQuery(function() {
  var counter = 1;
  jQuery('a.pluslink').click(function(event) {
    event.preventDefault();
    var newRow = jQuery(
      '<tr><td><input class="form-control full-width" id="full-name-f1" type="text" placeholder="Project"></td>' +
      '<td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +
      '"/></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"/><td>' +
      '<input class="form-control full-width" id="full-name-f1" type="text" value="0"' +

      '/></td></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +

      '/></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +

      '/></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +

      '"/></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +
      '/></td>' + '<td><a href="#" class="minuslink">Delete</a></td></tr>');
    counter++;
    jQuery('table.tablesubmit tr:last').before(newRow);
  });
  $("table.tablesubmit").on('click', '.minuslink', function(e) {
    event.preventDefault();
    $(this).parent().parent().remove();
  });
});

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<table class="tablesubmit">
  <thead>
    <tr>
      <th width="30%">Project name</th>
      <th width="10%">Mon</th>
      <th width="10%">Tue</th>
      <th width="10%">Wed</th>
      <th width="10%">Thur</th>
      <th width="10%">Fri</th>
      <th width="10%">Sat</th>
      <th width="10%">Sun</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="BOSS">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="1.25">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="0">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="5">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="1">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="5.5">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="0">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="0">
      </td>
      <td>
        <a href="" class="minuslink">Delete</a>
      </td>
    </tr>
    <tr>
      <td class="bold" width="25%">
        <a>Total Time:</a>
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="7.25" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="8" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="7.5" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="7" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td>37.5</td>
    </tr>
  </tbody>
</table>
<a href="" class="pluslink">Add new project</a>