用h5和jq写一个table,需要有增加行和删除行功能,列为:提单号/运单号、一程日期、二程日期、预计到货日期、海船公司、放箱日期、放箱单上传
时间: 2023-07-10 14:30:09 浏览: 81
一个可以增加和删除行的table并可编辑表格中内容
5星 · 资源好评率100%
可以参考下面的示例代码,实现一个包含增加行和删除行功能的表格,列包括提单号/运单号、一程日期、二程日期、预计到货日期、海船公司、放箱日期、放箱单上传:
HTML代码:
```html
<table id="myTable">
<thead>
<tr>
<th>提单号/运单号</th>
<th>一程日期</th>
<th>二程日期</th>
<th>预计到货日期</th>
<th>海船公司</th>
<th>放箱日期</th>
<th>放箱单上传</th>
<th>操作</th>
</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代码:
```javascript
$(function () {
// 增加行
$('#btn-add').click(function () {
let $tbody = $('#myTable tbody');
let $tr = $tbody.find('tr:last').clone();
$tr.find('input').val('');
$tbody.append($tr);
});
// 删除行
$('#myTable').on('click', '.btn-delete', function () {
$(this).closest('tr').remove();
});
});
```
上述代码中,通过jQuery选择器选中表格和按钮元素,通过click事件监听按钮的点击事件,实现增加行和删除行的功能。在增加行时,复制最后一行的元素,并清空其中的输入框;在删除行时,通过closest方法找到最近的tr元素,并移除它。另外,放箱单上传可以使用input[type=file]元素来实现。
阅读全文