<div class="load"><img src="load.gif" align="absmiddle"> <span></span></div>

<?php
 
function listEntry(){
 
/*************************************************************
** Функция получает из базы данных список записей
** функционал этой функции можно наращивать
** добавив, например, возможность фильтрованного отбора записей
*************************************************************/
	$sql = "SELECT * FROM `todo` WHERE 1";
 
	if($result = mysql_query($sql)){
		$list = array();
		while($todo = mysql_fetch_array($result, MYSQL_ASSOC)) $list[] = $todo;
 
		return $list;
	}
 
	return false;
}
 
function editEntry($id, $text){
/*************************************************************
** Функция редактирования записи в базе данных
 
** Сейчас предназначена только для редактирования текста задания
** Можно расширить возможности, добавив возможность редактировать другие поля
*************************************************************/
	$sql = "UPDATE `todo` SET text='".$text."' WHERE id='".$id."'";
	if($result = mysql_query($sql)){
		$sql = "SELECT * FROM `todo` WHERE `id`='".$id."'";
		return mysql_fetch_array(mysql_query($sql), MYSQL_ASSOC);
	}
	return false;
}
 
function delEntry($id){
/*************************************************************
** Функция удаляет запись из базы
*************************************************************/
	$sql = "DELETE FROM `todo` WHERE `id`='".$id."'";
	return mysql_query($sql);	
}
 
function addEntry($text, $data){
/*************************************************************
** Функция добавляет новую запись в базу данных
*************************************************************/
	$sql = "INSERT INTO `todo` VALUES ('', '".$text."', '".$data."')";
	return (mysql_query($sql) ? mysql_insert_id() : false);
}
 
/*
** Параметры базы данных
*/
 
$mysql_database="database_name";
$mysql_username="database_user"; 
$mysql_password="database_password"; 
$mysql_host="localhost";
 
//Соединяемся с базой данных
 
$mysql_connect = mysql_connect($mysql_host, $mysql_username, $mysql_password);
 
//Выбираем базу данных для работы
mysql_select_db($mysql_database);
 
/*
** Определяем, какое действие запрошено пользователем
** Вызываем соответствующую функцию и print`им ответ
*/
 
switch($_POST['action']){
 
	case 'edit':
		if($edit = editEntry($_POST['id'], $_POST['text'])) print "YES|".$_POST['id']."|".$_POST['text'];
	break;
 
	case 'delete':
		print (delEntry($_POST['id']) ? 'YES' : 'NO');
	break;
 
	case 'add':
		if($result = addEntry($_POST['text'], $_POST['data'])) print $result.'|'.$_POST['text'].'|'.$_POST['data'];
	break;
 
	case 'list':
		if($list = listEntry()){
			foreach($list as $key => $value){
				$list[$key] = autoencode(implode('|', $value));
			}
			print implode("\n", $list);
		}
	break;
 
}
?>

  $.post(
			"mysql_connect.php", 
			"action=list",
			function(data){
				ans = data.split(/\n/);
				for (var i = 0; i <= ans.length - 1; i++)
				{
					entry = ans[i].split(/\|/);
					$('.result table').find('tbody').append("<tr id='"+entry[0]+"'><td class='text'>"+entry[1]+"</td><td class='data'>"+entry[2]+"</td><td align='center'><img src='edit.png' class='edit'> <img src='del.png' class='erase'></td></tr>");
					set_action(entry[0]);
				}
			}
	)

function set_action(tr_id){
	$('tr#'+tr_id+' img.edit').click(function() { 
 
		// обработчик клика на изображении "редактировать"
		// находит текст текущей записи и меняет его на поле ввода
		// также создает новую ссылку "сохранить"
 
		tr_text = $('tr#'+tr_id).find('td.text').text();
		$('tr#'+tr_id).find('td.text').html("<input type='text' value='"+tr_text+"'> <a href='#' class='save'>&rarr;</a>");
 
		$('tr#'+tr_id+' a.save').click(function(){
 
			// теперь к этой самой ссылке "сохранить" "приделываем" обработчик
			// который при клике на ссылку берет текст, введенный в поле ввода
			// и отправляет его серверу с запросом "редактировать"
 
			text = $(this).parents('td').find('input').attr('value');
			id = $(this).parents('tr').attr('id');
 
			// меняем запись возле анимированные стрелочки
			// чтобы пользователь знал, что происходит			
 
			$('.load span').text('Сохранение элемента');
 
			// собственно, сам запрос			
 
			$.post(
				"mysql_connect.php", 
				"action=edit&id="+id+"&text="+text,
				function(data){
					ans = data.split(/\|/);
					if(ans[0]=='YES'){
						$('.load span').text('Успешно сохранено');
						$('tr#'+ans[1]+' td.text').text(ans[2]);
					}
					else {
						$('.load span').text('Не удалось сохранить элемент');
					}
				}
			);
		});
		return false;
	});
 
	$('.erase').click(function() { 
 
		// обработчик удаления текущей записи
		// его действие с модальным окном подробно было разобрано в первой части урока
 
		tr  = $(this).parents("tr");
		todo = tr.find('td.text').text();
		$('.load span').text('Удаление элемента');
 
		confirm('Вы попросили удалить : '+todo+'!', function(){
			$.post(
				"mysql_connect.php", 
				"action=delete&id="+tr.attr('id'),
				function(data){
					if(data=='YES'){
						$('.load span').text('Успешно удалено');
 
						// анимируем процесс визуального удаления элемента
 
						tr.css('background-color', 'red');
						tr.fadeOut('slow');
					}
					else {
						$('.load span').text('Не удалось удалить элемент');
					}
				}
			);
			return false;					
		}); 
 
		return false;
	});
 
	return false;
}

<p>Задание: <input type="text" id="todo"> Дата: <input type="text" id="date"> <br><a href="#" class="add">Добавить запись &rarr;</a></p>

  $('.add').click(function(){
 
	// считываем введенные данные
	todo = $('#todo').val();
	date = $('#date').val();
 
	// сообщаем пользователю то, что происходит
	$('.load span').text('Добавление нового элемента');
 
	if(todo.length&&date.length){
		$.post(
			"mysql_connect.php", 
			"action=add&text="+todo+"&data="+date,
			function(data){
				if(data!=''){
					entry = data.split(/\|/);
					$('.result table').find('tbody').append("<tr id='"+entry[0]+"'><td class='text'>"+entry[1]+"</td><td class='data'>"+entry[2]+"</td><td align='center'><img src='edit.png' class='edit'> <img src='del.png' class='erase'></td></tr>");					
					set_action(entry[0]);					
				}
			}
		);	
	}
  });

  $('#todo').focus(function(){
  	$(this).attr('value', '');
	return false;
  });
  $('#date').focus(function(){
  	$(this).attr('value', '');
	return false;
  });

  	$(".result").ajaxStart(function(){
		$('.load').fadeIn("slow");
	});
	$(".result").ajaxStop(function(){
		$('.load').fadeOut("slow");
	});