element中table选中的多条数据点击一次确认每条数据都调用接口
这个问题描述不太清楚,不过我猜测你的意思是:
在一个 HTML 页面中,有一个包含多个表格的元素(比如 <div> 或 <section>),用户可以在其中选中多条数据(比如勾选多个复选框)。当用户点击确认按钮时,需要针对每条选中的数据分别调用一个接口。
如果我的猜测是正确的,那么你可以按照以下步骤实现:
-
给每个表格行(或者复选框)添加一个唯一的标识符,比如
data-id属性。这个标识符可以是一个数字、一个字符串或者一个 UUID,只要能够唯一地标识每一行即可。 -
在确认按钮的点击事件处理函数中,获取选中的所有行(或者复选框),并且针对每一行调用一个接口。可以使用 jQuery 或者原生 JavaScript 实现这个逻辑。
-
在每次调用接口成功后,更新页面的状态,比如将已经处理过的行从选中状态变为未选中状态,或者将它们从页面中删除。
下面是一个示例代码,使用 jQuery 实现上述逻辑:
<div id="table-container">
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr data-id="1">
<td>1</td>
<td>Alice</td>
<td>alice@example.com</td>
<td><input type="checkbox" name="selected" value="1"></td>
</tr>
<tr data-id="2">
<td>2</td>
<td>Bob</td>
<td>bob@example.com</td>
<td><input type="checkbox" name="selected" value="2"></td>
</tr>
<tr data-id="3">
<td>3</td>
<td>Charlie</td>
<td>charlie@example.com</td>
<td><input type="checkbox" name="selected" value="3"></td>
</tr>
</tbody>
</table>
</div>
<button id="confirm-btn">Confirm</button>
<script>
$(document).ready(function() {
$('#confirm-btn').click(function() {
var selectedRows = $('#table-container input[name="selected"]:checked').closest('tr');
selectedRows.each(function() {
var row = $(this);
var id = row.data('id');
$.ajax({
url: '/api/process/' + id,
method: 'POST',
success: function() {
row.remove();
},
error: function() {
alert('Failed to process row ' + id);
}
});
});
});
});
</script>
在这个示例中,我们使用了一个包含三个表格行的 <table> 元素作为例子。每个表格行都有一个 data-id 属性,用于标识这一行的唯一 ID。确认按钮的点击事件处理函数中,我们首先使用 jQuery 的选择器找到所有被选中的行,然后使用 .each() 方法遍历它们。在每个遍历到的行中,我们获取它的 ID,然后使用 jQuery 的 $.ajax() 方法调用一个 API 接口。如果调用成功,我们将这一行从页面中删除。如果调用失败,我们弹出一个提示框告诉用户处理失败
原文地址: https://www.cveoy.top/t/topic/cIlU 著作权归作者所有。请勿转载和采集!