html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table id="tbl">
<tr>
<th>Id</th>
<th>Name</th>
<th>Supplier</th>
<th>Weight</th>
<th>Location</th>
</tr>
</table>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
table {
font-size: 1em;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid #333;
margin: 20px 5px;
}
caption {
font-size: 1.2em;
font-weight: 600;
margin-bottom: 10px;
text-align: left;
}
td, th {
border: 1px solid #333;
text-align: right;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var rows = 6;
var cols = 5;
var boxes = [];
var json = [{"id":"mars","name":"Mars","supplier":"Nestle","weight":1,"location":"a1.1/A"},{"id":"kitkat","name":"Kit Kat","supplier":"Nestle","weight":1,"location":"a1.1/A"},{"id":"dd","name":"Double Decker","supplier":"Nestle","weight":1,"location":"a1.1/A"},{"id":"mars","name":"Mars","supplier":"Nestle","weight":1,"location":"a1.1/A"},{"id":"kitkat","name":"Kit Kat","supplier":"Nestle","weight":1,"location":"a1.1/A"},{"id":"dd","name":"Double Decker","supplier":"Nestle","weight":1,"location":"a1.1/A"}]
var tbl;
function Box(tr) {
this.box = document.createElement("td");
// this.box.classList.add("box");
this.tr = tr;
this.tr.appendChild(this.box);
}
Box.prototype.update = function(text) {
this.box.innerText = text;
}
function init() {
var r,c;
tbl = document.querySelector("#tbl");
for(r=0;r<rows;r++) {
var tr = document.createElement("tr");
for(c=0;c<cols;c++) {
boxes.push(new Box(tr));
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run