javascript - 使用 JS 到多个 html 表的 JSON 数据
问题描述
我的网站上有多个表的 JSON 数据。每个表都有相同的列数(2 列)。我尝试最小化显示带有当前 JSON 数据的表的 javascript 函数。我是否必须在 html 中创建每个表格,或者一个表格对于该功能也应该足够了?如何获取 JSON 数据并为它们创建单独的表?
这是代码 https://codepen.io/S4UCY/pen/wvGgzmZ
var firstTable = [
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablabla',
},
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablabla',
}
]
var secondTable = [
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablablablabla',
}
]
/*
1. Loop Through Array & Access each value
2. Create Table Rows & append to table
*/
for (var i in firstTable){
var row = `<tr>
<td>${firstTable[i].code}</td>
<td>${firstTable[i].result}</td>
`
var table = $('#table-body')
table.append(row)
}
#title{
color:#fff;
font-weight:100;
font-size:28px;
padding:10px;
border:1px solid #fff;
background-color: #55608f;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #bada55, #5f2c82);
font-family: sans-serif;
font-weight: 100;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
table {
width: 500px;
border-collapse: collapse;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
th,
td {
padding: 15px;
background-color: rgba(255,255,255,0.2);
color: #fff;
}
th {
text-align: left;
}
thead {
th {
background-color: #bada55;
}
}
tbody {
tr {
&:hover {
background-color: rgba(255,255,255,0.3);
}
}
td {
position: relative;
&:hover {
&:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -9999px;
bottom: -9999px;
background-color: rgba(255,255,255,0.2);
z-index: -1;
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1 id="title">List of codes</h1>
<!-- Table structure here -->
<table id="our-table">
<thead>
<tr>
<th>Code</th>
<th>Result</th>
</tr>
</thead>
<tbody id="table-body">
<!-- Table creates here -->
</tbody>
</table>
</div>
解决方案
您可以定义数据,如下所述:
var data = [
[{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablabla',
},
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablabla',
}
],
//Second Data
[
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablablablabla',
},
{
'code': 'blabla',
'result': 'blablablablablabla',
}
]
每次输入新数据时都可以创建表。像这样的东西。
for(let node=0; node<data.length; node++){
//Here create your table with variable node as your id.
node.foreach((element)=>{
//append element data to the table created
}
}
希望这个帮助!!..快乐编码!
推荐阅读
- python - 在熊猫数据帧上循环(迭代) - 如何选择所需的值?
- eclipse - Eclipse 格式化程序
- php - 为什么 Symfony 5.1 不能识别“routes.php”文件中配置的路由?
- c# - C# float.Parse 忽略文化
- python - Python 2/3:Urllib 错误 - EOF 发生违反协议 (_ssl.c:727)
- reactjs - 打印映射数据的值
- firebase - Flutter Google 登录数据保存到 Firebase Cloud Firestore
- python - Django 自定义用户模型未显示在管理页面的身份验证和授权下
- python - 谷歌云数据存储延迟
- javascript - ui-bootstrap 模态不会关闭或关闭