oktatas:web:jquery:jquery_tablazat_renderelese
< jQuery
jQuery - Táblázat renderelése
A weblap
<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>
Renderelés példa
- 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)
}
oktatas/web/jquery/jquery_tablazat_renderelese.txt · Utolsó módosítás: 2024/05/03 15:27 szerkesztette: admin