jQuery - Táblázat renderelése

• Szerző: Sallai András
• Copyright © 2024, Sallai András
• Szerkesztve: 2024
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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

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)
}