Tabela i operacje na niej tylko JQUERY

0

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?

0

Hej,
Ogólnie to nie za bardzo Ci to wyszło, ale nie zrażaj się!
Jeżeli chodzi o przechowywanie tabeli w Local Storage, to należy ją umieścić w jakiejś zmiennej "powiedzmy" globalnej.
Ale przeglądarki jakby nam coś takiego już umożliwiają (tutaj link ocb )

Czyli sobie trzymamy taką listę w tym Local Storage, powiedzmy takiego JSONa

{
"lista": [
{"ILOŚĆ":123, "CENA":123, ...},
{"ILOŚĆ":123, "CENA":123, ...},
...
]
}

Oraz mamy funkcje

function refreshRable() {
     // pobranie listy z LS i "narysowanie" jej 
    // czyli usunięcie obecnej tabeli i zbudowanie jej od nowa
}

function add() {
     // pobranie listy z LS
     // dodanie pozycji
     // zapisanie listy do LS
     refreshRable() // wywołanie rysowania listy
}

// i tak dalej pozostałe funkcje

No i następnie podpięcie tych funkcji pod odpowiednie miejsca
Tak przynajmniej rozumiem te założenia

0

Po dłuższej przerwie wróciłem spróbować ponownie rozwiązać te zadanie poprawnie, ale słabo wychodzi..
Ogólnie na początku chciałem wrzucić dane początkowe z tabeli do localStorage, coś takiego wykombinowałem:

http://jsbin.com/vuqoqacaxu/1/edit?html,js,output

Ktoś doradzi, pomoże?

0

Danych początkowych nie powinieneś wyciągać z HTMLa a trzymać je już w jsie w talicy arr. Tabelka w html ma być tylko odpowiedzialna za prezentacje tych danych. Tak jak ktoś wyżej Ci pisał zrób sobie metodę w style "renderTable()" i niech ona "rysuje" tabelkę na podstawie danych jakie masz w tablicy.

1 użytkowników online, w tym zalogowanych: 0, gości: 1