用ajax访问请求数据,返回数据添加到bootstrap表格中,每一行添加按钮,并且给按钮添加值
时间: 2023-05-28 11:03:53 浏览: 176
以下是一个简单的示例代码,用于使用ajax访问请求数据,返回数据添加到bootstrap表格中,并为每一行添加按钮并给按钮添加值:
HTML代码:
```
<table id="myTable" class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Button</th>
</tr>
</thead>
<tbody></tbody>
</table>
```
JavaScript代码:
```
$(document).ready(function() {
// 通过ajax请求获取数据
$.ajax({
url: "data.php",
type: "GET",
dataType: "json",
success: function(data) {
// 将数据添加到表格中
$.each(data, function(i, item) {
var $tr = $("<tr>").appendTo($("#myTable tbody"));
$("<td>").text(item.id).appendTo($tr);
$("<td>").text(item.name).appendTo($tr);
$("<td>").html("<button class='btn btn-primary' value='" + item.id + "'>Click Me</button>").appendTo($tr);
});
}
});
});
```
在这个例子中,我们使用jQuery的ajax函数来请求数据。然后,我们使用$.each函数来遍历数据,并将每行添加到表格中。对于每一行,我们添加一个按钮,给它一个类名和值。
阅读全文