Javascript 使用引导将JSON文件加载到表中
我对创建网站和类似的东西是完全陌生的，我无法做一些应该非常简单的事情。我想将同一目录中的JSON文件加载到表中。我一直在寻找答案，但似乎什么都不适合我，所以我一定是做错了什么 我找到了我试过使用的，但在尝试了很多东西后，我无法让它工作。在我的例子中，我将在同一目录中的JSON文件中包含Javascript 使用引导将JSON文件加载到表中,javascript,jquery,html,json,twitter-bootstrap,Javascript,Jquery,Html,Json,Twitter Bootstrap,我对创建网站和类似的东西是完全陌生的，我无法做一些应该非常简单的事情。我想将同一目录中的JSON文件加载到表中。我一直在寻找答案，但似乎什么都不适合我，所以我一定是做错了什么 我找到了我试过使用的，但在尝试了很多东西后，我无法让它工作。在我的例子中，我将在同一目录中的JSON文件中包含数据 我的test.html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">
数据
我的test.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Hello World">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script>
var data =
[
{
"id": 0,
"name": "test0",
"price": "$0"
},
{
"id": 1,
"name": "test1",
"price": "$1"
},
{
"id": 2,
"name": "test2",
"price": "$2"
},
{
"id": 3,
"name": "test3",
"price": "$3"
},
{
"id": 4,
"name": "test4",
"price": "$4"
},
{
"id": 5,
"name": "test5",
"price": "$5"
},
{
"id": 6,
"name": "test6",
"price": "$6"
},
{
"id": 7,
"name": "test7",
"price": "$7"
},
{
"id": 8,
"name": "test8",
"price": "$8"
},
{
"id": 9,
"name": "test9",
"price": "$9"
},
{
"id": 10,
"name": "test10",
"price": "$10"
},
{
"id": 11,
"name": "test11",
"price": "$11"
},
{
"id": 12,
"name": "test12",
"price": "$12"
},
{
"id": 13,
"name": "test13",
"price": "$13"
},
{
"id": 14,
"name": "test14",
"price": "$14"
},
{
"id": 15,
"name": "test15",
"price": "$15"
},
{
"id": 16,
"name": "test16",
"price": "$16"
},
{
"id": 17,
"name": "test17",
"price": "$17"
},
{
"id": 18,
"name": "test18",
"price": "$18"
},
{
"id": 19,
"name": "test19",
"price": "$19"
},
{
"id": 20,
"name": "test20",
"price": "$20"
}
];
$(function () {
$('#table').bootstrapTable({
data: data
});
});
</script>
</head>
<body>
<header>
<div class="jumbotron">
<div class="container">
<h3>Testing table in bootstrap</h3>
</div>
</div>
</header>
<div class="container">
<div class="row">
<table id="table" class="table table-bordered">
<thead>
<tr class="info">
<th data-field="id">First name</th>
<th data-field="name">Last name</th>
<th data-field="price">Age</th>
</tr>
<thead>
</table>
</div>
</div>
<footer>
<div class="container">
<hr>
<p><small><a href="http://google.com">Link</a> link</small></p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
试验
风险值数据=
[
{
“id”：0，
“名称”：“test0”，
“价格”：“$0”
},
{
“id”：1，
“名称”：“test1”，
“价格”：“$1”
},
{
“id”：2，
“名称”：“test2”，
“价格”：“$2”
},
{
“id”：3，
“名称”：“test3”，
“价格”：“$3”
},
{
“id”：4，
“名称”：“test4”，
“价格”：“$4”
},
{
“id”：5，
“名称”：“test5”，
“价格”：“$5”
},
{
“id”：6，
“名称”：“test6”，
“价格”：“$6”
},
{
“id”：7，
“名称”：“test7”，
“价格”：“$7”
},
{
“id”：8，
“名称”：“test8”，
“价格”：“$8”
},
{
“id”：9，
“名称”：“test9”，
“价格”：“$9”
},
{
“id”：10，
“名称”：“test10”，
“价格”：“$10”
},
{
“id”：11，
“名称”：“test11”，
“价格”：“$11”
},
{
“id”：12，
“名称”：“test12”，
“价格”：“$12”
},
{
“id”：13，
“名称”：“test13”，
“价格”：“$13”
},
{
“id”：14，
“名称”：“test14”，
“价格”：“$14”
},
{
“id”：15，
“名称”：“test15”，
“价格”：“$15”
},
{
“id”：16，
“名称”：“test16”，
“价格”：“$16”
},
{
“id”：17，
“名称”：“test17”，
“价格”：“$17”
},
{
“id”：18，
“名称”：“test18”，
“价格”：“$18”
},
{
“id”：19，
“名称”：“test19”，
“价格”：“$19”
},
{
“id”：20，
“名称”：“test20”，
“价格”：“$20”
}
];
$（函数（）{
$（“#表”）.bootstrapTable({
数据：数据
});
});
bootstrap中的测试表
名字
姓
年龄
链接
我只想使用Bootstrap将JSON文件加载到表中。所有外部脚本都必须在head标记中
var数据=
[
{
“id”：0，
“名称”：“test0”，
“价格”：“$0”
},
{
“id”：1，
“名称”：“test1”，
“价格”：“$1”
},
{
“id”：2，
“名称”：“test2”，
“价格”：“$2”
},
{
“id”：3，
“名称”：“test3”，
“价格”：“$3”
},
{
“id”：4，
“名称”：“test4”，
“价格”：“$4”
},
{
“id”：5，
“名称”：“test5”，
“价格”：“$5”
},
{
“id”：6，
“名称”：“test6”，
“价格”：“$6”
},
{
“id”：7，
“名称”：“test7”，
“价格”：“$7”
},
{
“id”：8，
“名称”：“test8”，
“价格”：“$8”
},
{
“id”：9，
“名称”：“test9”，
“价格”：“$9”
},
{
“id”：10，
“名称”：“test10”，
“价格”：“$10”
},
{
“id”：11，
“名称”：“test11”，
“价格”：“$11”
},
{
“id”：12，
“名称”：“test12”，
“价格”：“$12”
},
{
“id”：13，
“名称”：“test13”，
“价格”：“$13”
},
{
“id”：14，
“名称”：“test14”，
“价格”：“$14”
},
{
“id”：15，
“名称”：“test15”，
“价格”：“$15”
},
{
“id”：16，
“名称”：“test16”，
“价格”：“$16”
},
{
“id”：17，
“名称”：“test17”，
“价格”：“$17”
},
{
“id”：18，
“名称”：“test18”，
“价格”：“$18”
},
{
“id”：19，
“名称”：“test19”，
“价格”：“$19”
},
{
“id”：20，
“名称”：“test20”，
“价格”：“$20”
}
];
$（函数（）{
$（“#表”）.bootstrapTable({
数据：数据
});
});
试验
bootstrap中的测试表
名字
姓
年龄
我是否只需在标题中的
之间添加jQuery？不管怎样，我试过了，它似乎仍然不起作用。我更新了我的问题，它似乎仍然不起作用。@user5368737，我编辑了我的解决方案，你错过了jQuery库，这是你遇到了错误。还有一个问题：我如何从一个文件加载JSON，而不是将它放在同一个文件中？@user5368737，是否要生成另一个json文件？