[spo]

Здравствуйте.
Нашел в интернете пример удаления столбцов в таблице (http://www.bloj.ru/wordpress/del_colums.html и http://stackoverflow.com/questions/1...l-table-column), попытался разобраться, но возник ряд вопросов на которые не могу найти ответ самостоятельно.

Оригинал:

$("a.delete").live("click", function(){
	var myIndex = $(this).closest("td").prevAll("td").length;
	$(this).parents("table").find("tr").each(function(){
		$(this).find("td:eq("+myIndex+")").animate({width: "0"}, 1000, function(){
			$(this).remove();
			fixTitles();
		});
	});
});

function fixTitles() {
	$("tr:eq(0) td").each(function(a){
		$(this).html("<a href='#' class='delete'>Delete Row</a> COL " + (a+1));
	});
}

Вот рабочий код который я немного изменил добавив одно условие:

(function($) {

	$("a.delete").live("click", function() {
		var myIndex1 = $(this).closest("td").prevAll("td").length;
		var myIndex2 = $(this).closest("tr").find("td").length;
		if(myIndex2 > 1) {
			$(this).parents("table").find("tr").each(function() {
				$(this).find("td:eq("+myIndex1+")").animate({opacity: 0, width: 0}, 'slow', function(){
					$(this).remove();
					$("tr:eq(0) td").each(function(a) {
						$(this).html("<a href='#' class='delete'>Delete col</a> "+(a+1));
					});
				});
			});
		} else {
			$(this).parents("table").animate({opacity: 0, width: 0}, 'slow', function(){
				$(this).remove();
			});
		}
		return false;
	});
	
})(jQuery);

1. Зачем в оригинальном примере следующий код был вынесен в отдельную функцию:

$("tr:eq(0) td").each(function(a) {
						$(this).html("<a href='#' class='delete'>Delete col</a> "+(a+1));
					});

2. Почему если вынести данный код за пределы animate, то он срабатывать не будет?

3. Для чего используется live и почему если заменить его на click то событие не срабатывает?

HTML:

<table>
		<tr>
			<td><a href="#" class="delete">Delete col</a> 1</td>
			<td><a href="#" class="delete">Delete col</a> 2</td>
			<td><a href="#" class="delete">Delete col</a> 3</td>
			<td><a href="#" class="delete">Delete col</a> 4</td>
			<td><a href="#" class="delete">Delete col</a> 5</td>
			<td><a href="#" class="delete">Delete col</a> 6</td>
		</tr>
		<tr>
			<td>row 1</td>
			<td>row 1</td>
			<td>row 1</td>
			<td>row 1</td>
			<td>row 1</td>
			<td>row 1</td>
		</tr>
		<tr>
			<td>row 2</td>
			<td>row 2</td>
			<td>row 2</td>
			<td>row 2</td>
			<td>row 2</td>
			<td>row 2</td>
		</tr>
	</table>