$('#table').bootstrapTable 如何动态展示Json: { "name":"张三", "insuredInfos":[ { "name": '刘星1' },{ "name": '刘星2' } ] } 效果为 : 张三 刘星1 张三 刘星2
时间: 2023-10-05 17:04:49 浏览: 133
动态的显示table列
可以使用jQuery的`append()`方法来动态展示Json数据。首先,你需要获取到Json数据,然后遍历数据中的`insuredInfos`数组,将每个对象中的name属性添加到表格中。以下是实现此功能的代码:
```javascript
var json = {
"name": "张三",
"insuredInfos": [
{ "name": '刘星1' },
{ "name": '刘星2' }
]
};
// 清空表格内容
$('#table').empty();
// 添加表头
$('#table').append('<thead><tr><th>姓名</th><th>被保人姓名</th></tr></thead>');
// 遍历insuredInfos数组,添加每个被保人姓名
$.each(json.insuredInfos, function(index, item) {
$('#table').append('<tr><td>' + json.name + '</td><td>' + item.name + '</td></tr>');
});
```
这段代码首先清空了表格内容,然后添加了表头。接下来,使用`$.each()`遍历`insuredInfos`数组,将每个被保人姓名添加到表格中的新行中。在每一行中,使用`+`操作符将Json数据中的name属性与静态的"姓名"列拼接起来。最后,将拼接好的行添加到表格中。
这样,你就可以实现动态展示Json数据的效果了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [[教程]HTML5+Bootstrap4+Spring Boot+Mysql 图书管理系统 (附源码)](https://blog.csdn.net/qq_29023593/article/details/123109101)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
阅读全文