Проблема со списком jquery
Помогите пожалуйста. Суть проблемы в следующем.
Есть список, выполненный в виде строк таблицы <tr>. Внутри находится несколько колонок. В одной из колонок ссылка для удаления родительского <tr> (.delete). В другой выводится номер строки, совпадающий с id родительского <tr> (.number). На странице также есть ссылка для добавления строк, т.е. элементов списка (.add). Так вот, допустим мы добавляем n элементов списка. У каждого элемента <tr> свой id, по возрастанию. При удалении одного из элементов, должен производиться пересчет, т.е. если у нас есть 3 элемента и мы удаляем второй, то 2 удаляется, а 3 меняет свой id на 2. Я реализовал это след. образом. При нажатии на удалить, id засовываю в переменную. После етого произвожу удаление всего, что было после <tr> то есть все next tr'ы, и воссоздаю их снова с помощью цикла. Работает, но некорректно. В FF и Oper'e все работает нормально, но если попытаться удалить элемент с id=2, два раза, т.е. до удаления и после, то ничего не происходит. Если после этого добавить элемент, то все нормально, но опять же нельзя удалить два раза. В IE при нажатии на удалить, удаляет, если элемент только один. Если несколько, то удаляет только при нажатии на "удалить" последнего элемента, а потом первого. Код прилагается ниже. Помогите разобраться с данным методом или если есть метод проще, подскажите пожалуйста:) Заранее спасибо.
$(document).ready(function(){
$(".add").click(function() {
a=a+1;
arr[a]=a;
p=a;
var oldHtml = $('#approachs-list tr:last').html();
if (a%2 == 0) {
var newHtml = '<tr id=' + arr[a] + ' class="blue">' + oldHtml +'</tr>';
}
if (a%2 != 0) {
var newHtml = '<tr id=' + arr[a] + ' class="pink">' + oldHtml +'</tr>';
}
$('#approachs-list').append(newHtml);
$('#approachs-list tr:last .number').text(arr[a]);
$('.delete').click(function() {
tr = $(this).parents('tr');
thisid = $(tr).attr('id');
$(tr).nextAll()
.remove();
tr.remove();
j = arr[thisid];
for (i=j;i<p;i++) {
var oldHtml2 = $('#approachs-list tr:first').html();
if (i%2 == 0) {
var newHtml2 = '<tr id=' + i + ' class="blue">' + oldHtml2 +'</tr>';
}
if (i%2 != 0) {
var newHtml2 = '<tr id=' + i + ' class="pink">' + oldHtml2 +'</tr>';
}
$('#approachs-list').append(newHtml2);
$('#approachs-list tr:last .number').text(i);
}
p=p-1;
a=a-1;
});
});
});
|
Это бредовая идея с пересчетом идентификаторов, пересмотрите алгоритм решения задачи.
Помоему у каждой строки в таблице есть свойство rowIndex, которое пересчитывается браузером автоматически при добавлении/удалении строк. |
Код поправил, проблемы частично устранил:) Вот только click в IE на динамически созданных элементах не работает (точнее работает, но только на одном элементе). В других браузерах все ок. Использую библиотеку livequery для обработки динамически созданных элементов.
В чем может быть проблема? |
В jQuery 1.3 (обещают финальную версию через несколько дней) будет встроен метод live, который делает тоже самое, что плагин livequery.
В вашем случае вообще лучше повесить один обработчик события на таблицу и использовать эффект всплывания события:
$('table').bind('click', function(e) {
if(e.target.tagName == 'TR') {
// e.target.rowIndex — номер строки
}
});
Тогда не нужно будет отслеживать изменения DOM и назначать нужные обработчики событий. |
| Часовой пояс GMT +3, время: 15:45. |