[[oktatas:web:jquery|< jQuery]]

====== jQuery - 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

===== A weblap =====

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

    </div>
    <script src="jquery.js"></script>
    <script type="module" src="app.js"></script>
</code>

===== Renderelés példa =====

<code javascript src/app.js>
const url = 'http://localhost:8000/employees'
var empList = []

$.ajax(url)
.done((data) => {
    console.log(data)
    empList = data
    renderTable()
})

function renderTable() {    
    empList.forEach(emp => {
        const tr = $('<tr>')
        tr.append(`
            <td>${emp.id}</td>
            <td>${emp.name}</td>
            <td>${emp.city}</td>
            <td>${emp.salary}</td>
            <td>
                <button class="btn btn-primary editButton"
                >Szerkesztés</button>

                <button class="btn btn-danger delButton"                
                >Törlés</button>
            </td>
        `)
        tr.find('.editButton').click( () => editEmployee(emp))
        tr.find('.delButton').click( () => deleteEmployee(emp.id))
        $('#empsBody').append(tr)        
    })
}

function deleteEmployee(id) {
    console.log('törlés...')
    console.log(id)
}

function editEmployee(emp) {
    console.log('szerkesztés...')
    console.log(emp.name)
}


</code>