二级联动,前端获取后台数据,一级是table的tr数据,改变二级table数据 具体代码
时间: 2024-02-27 14:52:36 浏览: 14
您好,感谢您的提问。根据您的问题描述,我理解您需要实现一个二级联动的功能,即在前端通过 AJAX 请求后台数据,将返回的一级数据渲染到表格中,并且支持点击一级表格中的行时,动态获取二级数据并渲染到另一个表格中。下面是一个示例代码,供您参考:
HTML:
```
<!-- 一级表格 -->
<table id="table1">
<thead>
<tr>
<th>一级表格标题1</th>
<th>一级表格标题2</th>
</tr>
</thead>
<tbody>
<!-- 这里是动态生成的 -->
</tbody>
</table>
<!-- 二级表格 -->
<table id="table2">
<thead>
<tr>
<th>二级表格标题1</th>
<th>二级表格标题2</th>
</tr>
</thead>
<tbody>
<!-- 这里是动态生成的 -->
</tbody>
</table>
```
JavaScript:
```
$(document).ready(function() {
// 获取一级数据并渲染到表格中
$.ajax({
url: 'your_backend_url',
method: 'GET',
dataType: 'json',
success: function(data) {
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<tr data-id="' + data[i].id + '">';
html += '<td>' + data[i].field1 + '</td>';
html += '<td>' + data[i].field2 + '</td>';
html += '</tr>';
}
$('#table1 tbody').html(html);
},
error: function(xhr, status, error) {
console.error(error);
}
});
// 给一级表格中的行绑定点击事件
$('#table1 tbody').on('click', 'tr', function() {
var id = $(this).data('id');
// 获取二级数据并渲染到表格中
$.ajax({
url: 'your_backend_url?id=' + id,
method: 'GET',
dataType: 'json',
success: function(data) {
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<tr>';
html += '<td>' + data[i].field1 + '</td>';
html += '<td>' + data[i].field2 + '</td>';
html += '</tr>';
}
$('#table2 tbody').html(html);
},
error: function(xhr, status, error) {
console.error(error);
}
});
});
});
```
在这个示例代码中,我们使用 jQuery 的 ajax 方法向后台发送 GET 请求,获取一级和二级数据。在成功获取到一级数据后,我们将其动态生成到表格中。然后,我们给一级表格中的行绑定点击事件,当用户点击某一行时,我们获取该行的 id,并将其作为参数发送到后台,获取对应的二级数据。在成功获取到二级数据后,我们将其动态生成到另一个表格中。