在<thead>上面实现增加行

在`<thead>`上面实现增加行可以使用以下代码：

HTML代码：

<table id="myTable">
  <thead>
    <tr>
      <th>提单号/运单号</th>
      <th>一程日期</th>
      <th>二程日期</th>
      <th>预计到货日期</th>
      <th>海船公司</th>
      <th>放箱日期</th>
      <th>放箱单上传</th>
      <th>操作</th>
    </tr>
    <tr id="row-template" style="display:none">
      <td><input type="text" name="bill_no"></td>
      <td><input type="date" name="first_date"></td>
      <td><input type="date" name="second_date"></td>
      <td><input type="date" name="expect_date"></td>
      <td><input type="text" name="shipping_company"></td>
      <td><input type="date" name="box_date"></td>
      <td><input type="file" name="box_file"></td>
      <td><button class="btn-delete">删除</button></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="bill_no"></td>
      <td><input type="date" name="first_date"></td>
      <td><input type="date" name="second_date"></td>
      <td><input type="date" name="expect_date"></td>
      <td><input type="text" name="shipping_company"></td>
      <td><input type="date" name="box_date"></td>
      <td><input type="file" name="box_file"></td>
      <td><button class="btn-delete">删除</button></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="8"><button id="btn-add">增加行</button></td>
    </tr>
  </tfoot>
</table>

JavaScript代码：

$(function () {
  // 增加行
  $('#btn-add').click(function () {
    let $rowTemplate = $('#row-template');
    let $tbody = $('#myTable tbody');
    let $tr = $rowTemplate.clone().removeAttr('id').show();
    $tr.find('input').val('');
    $tbody.append($tr);
  });

  // 删除行
  $('#myTable').on('click', '.btn-delete', function () {
    $(this).closest('tr').remove();
  });
});

在上述代码中，我们在`<thead>`中添加了一行隐藏的模板行，通过jQuery选择器选中该行，并克隆它来实现增加行。在增加行时，先选中模板行，然后克隆并显示它，最后清空其中的输入框。另外，删除行的代码跟之前的示例代码一致。