Здравствуйте.
Нашел в интернете пример удаления столбцов в таблице (
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>
