code-kitchen/src/html-dynamic-table/Table.js at main · kemapak/code-kitchen · GitHub

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
class Table {

    #template;
    #tbody;

    constructor(tableId, templateRowId) {
        this.#template = document.querySelector('#' + templateRowId);
        this.#tbody = document.querySelector('#' + tableId + ' tbody');
    }

    addRow() {
        if (arguments.length > 0) {
            let cellInputs = this.#template.content.querySelectorAll('td input');
            for (let argumentIndex = 0, cellIndex = 0, numberOfArguments = arguments.length; argumentIndex < numberOfArguments; argumentIndex++, cellIndex++) {
                cellInputs[cellIndex].value = arguments[argumentIndex];
            }
        }

        let clone = document.importNode(this.#template.content, true);
        this.#tbody.appendChild(clone);
    }

    editRow(rowElement) {
        let inputs = rowElement.querySelectorAll('input[type="text"]');

        for (let index = 0, numberOfInputs = inputs.length; index < numberOfInputs; index++) {
            inputs[index].removeAttribute('readonly');

        }

        let actionButton = rowElement.querySelectorAll('input[type="button"][value="Edit"]')[0];
        actionButton.setAttribute('value', 'Save');
    }

    saveRow(rowElement) {
        let inputs = rowElement.querySelectorAll('input[type="text"]');

        for (let index = 0, numberOfInputs = inputs.length; index < numberOfInputs; index++) {
            inputs[index].setAttribute('readonly', true);
        }

        let actionButton = rowElement.querySelectorAll('input[type="button"][value="Save"]')[0];
        actionButton.setAttribute('value', 'Edit');
    }

    deleteRow(rowElement) {
        rowElement.remove();
    }

    handleRowAction(event) {
        let srcElement = event.target;

        if ('INPUT' != srcElement.tagName) {
            return;
        }
        if ('button' != srcElement.getAttribute('type')) {
            return;
        }

        let row = srcElement.parentElement.parentElement;

        if ('TR' != row.tagName) {
            return;
        }

        if ('Remove' == srcElement.value) {
            this.deleteRow(row);
            return;
        }

        if ('Edit' == srcElement.value) {
            this.editRow(row);
            return;
        }

        if ('Save' == srcElement.value) {
            this.saveRow(row);
            return;
        }
    }
}