用ajax访问请求数据,返回数据添加到bootstrap表格中,每一行添加按钮,并且给按钮添加id
时间: 2023-05-28 13:03:54 浏览: 436
可以使用以下代码实现:
HTML代码:
```html
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
```
JS代码:
```javascript
$(document).ready(function() {
// 定义请求数据的URL
var url = "https://example.com/data";
// 发送AJAX请求获取数据
$.getJSON(url, function(data) {
// 遍历数据,添加到表格中
$.each(data, function(index, item) {
// 创建新行
var row = $("<tr>");
// 添加ID列
var idCell = $("<td>").text(item.id);
row.append(idCell);
// 添加Name列
var nameCell = $("<td>").text(item.name);
row.append(nameCell);
// 添加Age列
var ageCell = $("<td>").text(item.age);
row.append(ageCell);
// 添加Action列,包含一个按钮
var actionCell = $("<td>");
var button = $("<button>").text("Action").attr("id", "button_" + item.id);
actionCell.append(button);
row.append(actionCell);
// 添加新行到表格中
$("#myTable tbody").append(row);
});
});
});
```
在代码中,首先定义了请求数据的URL,然后使用jQuery的`$.getJSON`方法发送AJAX请求获取数据。获取到数据后,使用`$.each`方法遍历数据,创建新行并添加到表格中。在添加Action列时,使用`$("<button>")`方法创建一个按钮,并使用`attr`方法添加ID属性。最后将新行添加到表格的`<tbody>`中。
阅读全文