Zadanie na dziś

Należy za pomocą jQuery jeden wiersz tabeli zamienić na formularz (pola powinny zmienić się z "wyświetlanych" na edytowalne) pobierając równocześnie aktualne dane z serwera, a następnie wysłać formularz (korzystając z jQuery) i zamienić go na zwykłe nieedytowalne komórki.

Komórki nieedytowalne wyglądają tak:

<td>komorka</td>

Komórki edytowalne wyglądają tak:

<td><input ...></td>

jQuery

Widzieliśmy już przy okazji AJAX:

<script type="text/javascript" charset="utf8"
src="https://code.jquery.com/jquery-2.1.3.min.js">

Zamiast document.getElementById('id')

wystarczy $(selektor CSS) np.

$('#table1)

$('.inactive-user').hide()

Tworzenie elementów

h = $('<h1>Tytuł</h1>');
$('#content').append(h);
$('#content').prepend(h);

Zmiana zawartości elementu

$(document).ready(function() {
$("body h1:first").text('welcome')
})

$('#title').html('<b>Tytuł</b>')

Pokazywanie/ukrywanie wierszy

// Requires a button with id=btn-toggle-inactive
// toggles visibility of elements with class inactive-user
// assumes visibility starts at hidden
$(document).ready(function() {
  $('.inactive-user').hide();
  window.inactiveHidden = true;
  $('#btn-toggle-inactive').click(function(event){
    var btn =  $('#btn-toggle-inactive');
    if(window.inactiveHidden) {
      btn.text('Ukryj nieaktywnych użytkowników');
      window.inactiveHidden = false;
      $('.inactive-user').show();
    } else {
      btn.text('Pokaż nieaktywnych użytkowników');
      window.inactiveHidden = true;
      $('.inactive-user').hide();
    }
  })
})

Zaznaczenie wszystkich checkboxów

Mamy ma stronie ileś checkboxów. Chcemy dodać jeszcze jeden, który będzie zaznaczał/odznaczał wszystkie

<input type="checkbox" id="all_accept">

<script>    
  $("#all_accept").change(function(event){
  var check = event.target.checked;
  $('#protocols .accept').prop('checked',check)});
 </script>