Cześć,
Mam podany następujący kod:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zadanie 5</title>
</head>
<body>
<header>
<h1>PARAGON 30-03-15/004</h1>
</header>
<main>
<table>
<thead>
<tr>
<th class="lp">LP</th>
<th class="nazwa">NAZWA</th>
<th>ILOŚĆ</th>
<th>CENA</th>
<th>SUMA</th>
</tr>
</thead>
<tbody>
<tr>
<td class="lp">1</td>
<td class="nazwa">Jabłka</td>
<td>1,5</td>
<td>4,90 zł</td>
<td>7,35 zł</td>
</tr>
<tr>
<td class="lp">2</td>
<td class="nazwa">Bułka</td>
<td>5</td>
<td>0,49 zł</td>
<td>2,45 zł</td>
</tr>
<tr>
<td colspan="4" class="razem">RAZEM</td>
<td class="razem">9,80 zł</td>
</tr>
</tbody>
</table>
</main>
<form>
<table>
<thead>
<tr><td colspan="2">
<h2>Nowa pozycja</h2>
</td></tr>
</thead>
<tr>
<td>Nazwa:</td>
<td><input></td>
</tr>
<tr>
<td>Ilość:</td>
<td><input></td>
</tr>
<tr>
<td>Cena:</td>
<td><input></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" value="dodaj">
</td>
</tr>
</table>
</form>
</body>
</html>
Kod na JS Bin:
http://jsbin.com/xayofukapi/edit?html,output
Wykorzystując bibliotekę JQuery mam dodać następujące funkcjonalności:
- dodawanie nowych pozycji
- edycję istniejących pozycji
- usuwanie pozycji
- zmianę kolejności pozycji
Ponadto mam to rozwiązać "interfejsowo" w wybrany przeze mnie sposób, a zawartość listy mam przechowywać w local storage.
Pomoc: Przechowuj reprezentację paragonu w postaci tablicy obiektów, a dopiero na tej podstawie buduj dokument.
Siedziałem nad tym zadaniem dzisiaj i wczoraj (dopiero uczę się JS i JQuery) i rozwiązałem to zadanie z wykorzystaniem biblioteki JQuery, ale nie wiem czy moje rozwiązanie jest poprawne i spełnia warunki zadania np. nie wiem za bardzo o co chodzi, że mam to rozwiązać interfejsowo i przechowywać zawartość listy w local storage. Również mam problem ze zmianą "Sumy Razem" po usunięciu danego elementu / ów lub edycji danego elementu.
Przestawiam moje rozwiązanie:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zadanie 6</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<header>
<h1>PARAGON 30-03-15/004</h1>
</header>
<main>
<table id="myTable">
<thead>
<tr>
<th class="lp">LP</th>
<th class="nazwa">NAZWA</th>
<th>ILOŚĆ</th>
<th>CENA</th>
<th>SUMA</th>
<th>USUWANIE</th>
<th>EDYTOWANIE</th>
<th>PRZESUWANIE W GÓRE</th>
<th>PRZESUWANIE W DÓŁ</th>
</tr>
</thead>
<tbody>
<tr>
<td class="lp">1</td>
<td class="nazwa">Jabłka</td>
<td>1,5</td>
<td>4,90 zł</td>
<td>7,35 zł</td>
<td><button class="del">Usun</button></td>
<td><button class="edit">Edytuj</button></td>
<td><button class="gora">Przesuń w góre</button></td>
<td><button class="dol">Przesuń w dół</button></td>
</tr>
<tr>
<td class="lp">2</td>
<td class="nazwa">Bułka</td>
<td>5</td>
<td>0,49 zł</td>
<td>2,45 zł</td>
<td><button class="del">Usun</button></td>
<td><button class="edit">Edytuj</button></td>
<td><button class="gora">Przesuń w góre</button></td>
<td><button class="dol">Przesuń w dół</button></td>
</tr>
<tr>
<td colspan="4" class="razem">RAZEM</td>
<td class="razem">9,80 zł</td>
</tr>
</tbody>
</table>
</main>
<form>
<table>
<thead>
<tr><td colspan="2">
<h2>Nowa pozycja</h2>
</td></tr>
</thead>
<tr>
<td>Nazwa:</td>
<td><input></td>
</tr>
<tr>
<td>Ilość:</td>
<td><input></td>
</tr>
<tr>
<td>Cena:</td>
<td><input></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" id="dodaj" value="dodaj">
</td>
</tr>
</table>
</form>
</body>
</html>
JS:
/* Dodawanie: */
$(function(){
$('#dodaj').on('click', function(){
var newRow = $('<tr>');
/* LP */
var html = '<td>'+($('main table tr').length - 1)+'</td>';
/* Nazwa, ilosc, cena */
var inputValues = $('form input:not([type=button])').map(function(){
return $(this).val();
}).toArray();
$.each(inputValues, function(i, v){
html += '<td>'+v+'</td>';
});
/* Suma */
html += '<td>'+(Math.round((inputValues[1] * inputValues[2]) * 100) / 100)+ " zł" + '</td>';
/* Usuwanie */
html += '<td>'+ "<button class='del'>Usun</button>" + '</td>';
/* Edytowanie */
html += '<td>'+ "<button class='edit'>Edytuj</button>" + '</td>';
/* Przesuwanie */
html += '<td>'+ "<button class='gora'>Przesuń w góre</button>" + '</td>';
html += '<td>'+ "<button class='dol'>Przesuń w dół</button>" + '</td>';
/* Suma razem */
var cost = parseFloat($('main table tr:last-child td:last-child').html().replace(/ zł/g, '').replace(/,/g, '.')) + (inputValues[1] * inputValues[2]);
$('main table tr:last-child td:last-child').html((Math.round(cost * 100) / 100) + " zł");
newRow.html(html);
newRow.insertBefore('main tbody tr:last-child');
});
});
/* Usuwanie */
$(function(){
$('#myTable').on('click', '.del', function(){
$(this).closest('tr').remove();
});
});
/* Edytowanie */
$(function(){
$('#myTable').on('click', '.edit', function(){
var currentTD = $(this).parents('tr').find('td');
if($(this).html() == 'Edytuj'){
$.each(currentTD, function(){
$(this).prop('contenteditable', true)
});
}
else{
$.each(currentTD, function(){
$(this).prop('contenteditable', false)
});
}
$(this).html($(this).html() == 'Edytuj' ? 'Zapisz' : 'Edytuj')
});
});
/* Przesuwanie */
$(function(){
$('#myTable').on('click', '.gora', function(){
var row = $(this).parents("tr:first");
row.insertBefore(row.prev());
});
});
$(function(){
$('#myTable').on('click', '.dol', function(){
var row = $(this).parents("tr:first");
row.insertAfter(row.next());
});
});
Kod na JS Bin:
http://jsbin.com/jilajemuyo/edit?html,output
Ktoś pomoże, sprawdzi lub doradzi?
jQuery 
JavaScript 