基于json/ObjectJavaScript创建表
您好,我想基于dummydata创建一个表(学校时间表),该表采用json对象格式。对象如下所示基于json/ObjectJavaScript创建表,javascript,json,angular,typescript,html-table,Javascript,Json,Angular,Typescript,Html Table,您好,我想基于dummydata创建一个表(学校时间表),该表采用json对象格式。对象如下所示 this._days=[ { "day": "", "config": {} }, { "day": "Monday", "config": { 'timing': [ {'time': '9:00AM
this._days=[
{
"day": "",
"config": {}
},
{
"day": "Monday",
"config": {
'timing': [
{'time': '9:00AM-10:00AM',
'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
},
{'time': '10:00AM-11:00AM',
'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
},
{'time': '11:00AM-11:30AM',
'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
},
{'time': '12:00PM-12:30PM',
'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
}
]
}
},
{
"day": "Tuesday",
"config": {
'timing': [
{'time': '9:00AM-10:00AM',
'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
},
{'time': '10:00AM-11:00AM',
'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
},
{'time': '11:00AM-11:30AM',
'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
},
{'time': '12:00PM-12:30PM',
'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
}
]
}
},
...
基于dummydata,我想创建一个表,这样即使对象的大小增加(例如:星期六类或额外时间),表也应该自动调整。
该表应该看起来像一个正常的学校时间表,在左侧有天标题和时间。我用硬编码的值创建了一个基本表
<table width="100%" align="center" height=100%;>
<tr class="day">
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thrusday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr class="time">
<th>10:00 - 11:00</th>
<td>Physics-1</td>
<td>English</td>
<td></td>
<td>Chemestry-1</td>
<td>Alzebra</td>
<td>Physical</td>
</tr>
<tr class="time">
<th>11:00 - 12:00</th>
<td>Math-2</td>
<td>Chemestry-2</td>
<td>Physics-1</td>
<td>Hindi</td>
<td>English</td>
<td>Soft Skill</td>
</tr>
<tr class="time">
<th>12:00 - 01:00</th>
<td>Hindi</td>
<td>English</td>
<td>Math-1</td>
<td>Chemistry</td>
<td>Physics</td>
<td>Chem.Lab</td>
</tr>
<tr class="time">
<th>01:00 - 02:00</th>
<td>Cumm. Skill</td>
<td>Sports</td>
<td>English</td>
<td>Computer Lab</td>
<td>Header</td>
<td>Header</td>
</tr>
<tr class="time">
<th>02:00 - 03:00</th>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
</table>
时间
星期一
星期二
星期三
星期四
星期五
星期六
10:00 - 11:00
物理-1
英语
化学-1
阿尔兹布拉
身体的
11:00 - 12:00
数学-2
Chemestry-2
物理-1
印地语
英语
软技能
12:00 - 01:00
印地语
英语
数学-1
化学
物理学
化学实验室
01:00 - 02:00
嗯。技巧
体育
英语
计算机实验室
标题
标题
02:00 - 03:00
标题
标题
标题
标题
标题
标题
我试过这样的东西
<div>
<table style="width:100%; height:200px;">
<tr>
<th *ngFor="let row of _days" style="background: grey; color:white">
<h3><b>{{row.day}}</b></h3>
</th>
</tr>
<tr *ngFor="let row of _days">
<td style="background: grey;color:white">
<h3><b>{{row.config.timing[row].time}}</b></h3>
</td>
</tr>
</table>
</div>
{{row.day}
{{row.config.timing[row].time}
如何在javascript或Angular 2(typescript)中实现这一点?提前感谢各位您可以在angular 2中使用Priming datatable 在模块中使用
import {DataTableModule,SharedModule} from 'primeng/primeng';
在HTML中给出
<p-dataTable [value]="cars">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
您可以使用Angular2中的Priming数据表
我试过这样的方法<代码>///{{row.day}}///{{{row.config.timing[row].time}}////但未按预期工作,而此链接可能会回答问题,最好在这里包括答案的基本部分,并提供链接供参考。如果链接页面发生更改,仅链接的答案可能无效。-当然,也将包括基本代码@MartinSchneider.Hi Shiva。了解Priming数据表。实际上,我试着把Priming的日程安排部分包括进去。这正是时间表的样子。但是因为我不能负担使用jquery的费用,所以我没有使用。
public cars: Car[];
constructor(private http: Http) { }
ngOnInit() {
this.http.get('data.json')
.map(res => res.json())
.subscribe(data => this.cars = data,
err => console.log(err),
() => console.log('Completed'));
}
}