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

Question

早上好，

我目前正试图在我的表中插入一行，该行必须在最后一行之前。我尝试了一些不同的方法，但我似乎无法让它发挥作用。谁能告诉我哪里出错？

我尝试过使用jQuery('table.tablesubmit tr:last').append(newRow);并添加.before，但却抛出了错误（无法读取属性＆＃39;追加未定义的内容）。我是jQuery的新手，所以如果这真的很简单，请道歉。如果有一个更容易解决的问题，我可以接受建议。

我已经阅读了类似的主题，但是没有一个我可以使用我的具体例子。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

非常简单......只需使用before（），如果你想阅读更多内容，这里是jQuery网页的链接：http://api.jquery.com/before/

    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>