[[oktatas:web:javascript|< JavaScript]]

====== Táblázat renderelése ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Szerkesztve: 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu


===== Bevezetés =====

Dolgozók renderelése szerkesztő és nyomógombbal.

<note important>
Az onclick="" inline eseménykezelés nem működik modulok használata esetén.
</note>


===== Szimpla JavaScript =====


==== Táblázat renderelése ====

<code html>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>id</th>
                <th>Név</th>
                <th>Település</th>
                <th>Fizetés</th>
            </tr>
        </thead>
        <tbody id="empsBody"></tbody>
    </table>
</code>

<code javascript>
function renderTable() {    
    state.empList.forEach(emp => {
        let tr = document.createElement('tr');
        tr.innerHTML =`
           <td>${emp.id}</td>
           <td>${emp.name}</td>
           <td>${emp.city}</td>
           <td>${emp.salary}</td>
           <td>
            <button class="btn btn-primary"
                data-id="${emp.id}"
                data-name="${emp.name}"
                data-city="${emp.city}"
                data-salary="${emp.salary}"
                onclick="updateEmployee(this)"
            >Szerkesztés</button>

            <button class="btn btn-primary"
            onclick="deleteEmployee(${emp.id})"
            >Törlés</button>
           </td>
        `;
        
        doc.empsBody.appendChild(tr);
    });
    
}

function updateEmployee(source) {
    console.log(source.dataset.city)
}

function deleteEmployee(id) {
    console.log(id)
}

</code>

==== A this függvényen belül ====

<code html>
onclick="updateEmployee()"
</code>

<code javascript>
function updateEmployee() {
    const source = this.event.target;
    console.log(source.dataset.city)
}
</code>


==== A setAttribute() függvény használata ====

<code html>
onclick="updateEmployee()"
</code>

<code javascript>
function updateEmployee() {
    const source = this.event.target;
    console.log(source.getAttribute('data-city'))
}
</code>


===== Modulhasználattal =====

<code html src/index.html>
<!-- ... -->
      <table class="table table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>Név</th>
                <th>Település</th>
                <th>Fizetés</th>
            </tr>
        </thead>
        <tbody id="empsBody"></tbody>
    </table>
    </div>
    <script type="module" src="app.js"></script>
<!-- ... -->
</code>


<code javascript src/apiService.js>
const url = 'http://localhost:8000/employees';

async function getEmployees() {
    try {
        let response = await fetch(url);
        let result = await response.json();
        return result;
    }catch (err) {
        console.log('Hiba! A dolgozók lekérése sikertelen!');
        console.log(err);
    }   
}

export { getEmployees }
</code>


<code javascript src/app.js>
import { getEmployees } from "./apiService.js";

const doc = {
    empsBody: document.querySelector('#empsBody')
}
const state = {
    empList: []
}

window.addEventListener('load', () => {
    init();
});

function init() {
    getEmps();
}

async function getEmps() {
    state.empList = await getEmployees();
    renderTable()
}

function renderTable() {    
    state.empList.forEach(emp => {
        let tr = document.createElement('tr');
        tr.innerHTML =`
           <td>${emp.id}</td>
           <td>${emp.name}</td>
           <td>${emp.city}</td>
           <td>${emp.salary}</td>
           <td>
            <button class="btn btn-primary"
                data-id="${emp.id}"
                data-name="${emp.name}"
                data-city="${emp.city}"
                data-salary="${emp.salary}"
            >Szerkesztés</button>

            <button class="btn btn-primary"
            >Törlés</button>
           </td>
        `;
        const editBtn = tr.querySelector('button:nth-child(1)');
        editBtn.addEventListener('click', () => updateEmployee(editBtn));

        const delBtn = tr.querySelector('button:nth-child(2)');
        delBtn.addEventListener('click', () => deleteEmployee(emp.id));

        doc.empsBody.appendChild(tr);
    });
    
}

function updateEmployee(source) {
    console.log(source.dataset.city)
}

function deleteEmployee(id) {
    console.log(id)
}

</code>