-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
85 lines (75 loc) · 2.5 KB
/
script.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
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
const addRow = document.querySelector("#addRow")
const addColumn = document.querySelector("#addColumn")
const removeRow = document.querySelector("#removeRow")
const removeColumn = document.querySelector("#removeColumn")
const workplace = document.querySelector("#workplace")
const difference = 54
let countColumn = 3
let countRow = 3
const getCoords = elem => {
let box = elem.getBoundingClientRect()
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
}
}
const showRemoveCubes = () => {
let columns = document.querySelectorAll("td")
for (let column of columns) {
column.addEventListener("mouseover", () => {
removeRow.style.top = getCoords(column).top + "px"
removeColumn.style.left = getCoords(column).left + "px"
})
}
}
addColumn.addEventListener('click', () => {
let rows = document.querySelectorAll("tr")
++countColumn
for (let row of rows) {
row.insertAdjacentHTML("beforeend", '<td class = "square">')
}
addColumn.style.left = getCoords(addColumn).left + difference + "px"
removeColumn.style.left = getCoords(addColumn).left - difference + "px"
})
addRow.addEventListener('click', () => {
let tr = document.querySelector(".row")
let tr2 = tr.cloneNode(true)
++countRow
document.querySelector("table").append(tr2)
addRow.style.top = getCoords(addRow).top + difference + "px"
removeRow.style.top = getCoords(addRow).top - difference + "px";
})
removeColumn.addEventListener('click', () => {
let rows = document.querySelectorAll('tr')
if (countColumn > 1) {
for (let row of rows) {
let columns = row.querySelectorAll("td")
for (let column of columns) {
if (getCoords(column).left === getCoords(removeColumn).left) {
column.remove()
break
}
}
}
addColumn.style.left = getCoords(addColumn).left - difference + "px"
--countColumn
}
if (getCoords(removeColumn).left === getCoords(addColumn).left) {
removeColumn.style.left = getCoords(addColumn).left - difference + 'px'
}
})
removeRow.addEventListener('click', () => {
let rows = document.querySelectorAll("tr")
for (let row of rows) {
if (getCoords(row).top === getCoords(removeRow).top && countRow > 1) {
row.remove()
addRow.style.top = getCoords(addRow).top - difference + "px"
--countRow
break
}
}
if (getCoords(removeRow).top === getCoords(addRow).top) {
removeRow.style.top = getCoords(addRow).top - difference + 'px'
}
})
workplace.addEventListener("mouseover", showRemoveCubes)