-
-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathindex.html
More file actions
53 lines (45 loc) · 1.25 KB
/
index.html
File metadata and controls
53 lines (45 loc) · 1.25 KB
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<body>
<h1>Live table</h1>
<table id="table"></table>
<style>
input { border: 1px solid green; width: 30px; }
</style>
<script>
const socket = new WebSocket('ws://127.0.0.1:8000/');
const table = document.getElementById('table');
const cells = {};
const letters = ['A', 'B', 'C', 'D', 'E', 'F'];
socket.addEventListener('message', ({ data }) => {
const change = JSON.parse(data);
const cell = cells[change.cell];
cell.value = change.value;
});
const tr = document.createElement('tr');
tr.innerHTML = '<td></td>' +
letters.map((col) => `<td>${col}</td>`).join('');
table.appendChild(tr);
const keyup = (event) => {
socket.send(JSON.stringify({
cell: event.target.id,
value: event.target.value
}));
};
const createRow = (i) => {
const tr = document.createElement('tr');
tr.innerHTML = `<td>${i}</td>` + letters.map(
(col) => `<td><input id="${col}${i}" type="text"></td>`
).join('');
table.appendChild(tr);
letters.forEach((col) => {
const cell = col + i;
const input = document.getElementById(cell);
input.addEventListener('keyup', keyup);
cells[cell] = input;
});
};
for (let i = 1; i <= 5; i++) createRow(i);
</script>
</body>
</html>