Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.07.2009, 14:08
Новичок на форуме
Отправить личное сообщение для Tankist Посмотреть профиль Найти все сообщения от Tankist
 
Регистрация: 04.07.2009
Сообщений: 3

Динамическое удаление строк таблицы
Здравствуйте. Требуется сделать динамическое добавление строк в таблицу на экране и динамическое удаление выбранных строк (выбор осуществляется чекбоксом). События удаления/добавления: кнопки. Добавляю так:

{
z = document.getElementById('out'); // Получаем ссылку на таблицу
d = z.insertRow(z.rows.length); // Добавляем строку
d.setAttribute("id", "row_" + nextcount);

// Формируем строку элементов управления
z = document.createElement("input"); // Чекбокс (он указывает на удаляемую строку)
z.setAttribute("type", "checkbox");
z.setAttribute("id", "check_" + nextcount);	
d.appendChild(z); // Добавляем к строке

// Текст
tn1 = document.createTextNode("текст "+(counter+1)+" ");
d.appendChild(tn1); // Добавляем к строке

z = document.createElement("input"); // Строка ввода
z.setAttribute("type", "text");
z.setAttribute("name", "answer"+counter);
z.setAttribute("id", "input_" + nextcount);
d.appendChild(z); // Добавляем к строке

out.appendChild(d); // Добавляем строку к таблице
}


А вот с удалением проблема. Пробовал работать с id, однако получается слишком сложно. Решил сделать удаление с помощью pTable.deleteRow(numRow). В начале id чекбоксов совпадают с номером строки, поэтому можно считать значени чекбокса по номеру строки. Проблема в том, что после удаления части строк id чекбокса и номер строки уже никак не коррелируют, поэтому я не могу получить номер удаляемой строки (он определяется по наличию включенного чекбокса). Как можно получить значение чекбокса по номеру строки таблицы, в которой чекбокс расположен?
Ответить с цитированием
  #2 (permalink)  
Старый 04.07.2009, 15:40
Аватар для Octane
        
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane
 
Регистрация: 09.07.2008
Сообщений: 3,062

Идентификаторы вообще не нужны, у каждой строки есть свойство rowIndex:
var table = document.getElementById('out'); 

function deleteRows(table) {
	var inputs = table.getElementsByTagName("input");
	var i = inputs.length;
	while (i--) {
		var input = inputs[i];
		if (input.checked == true) {
			var tr = input.parentNode.parentNode;
			table.deleteRow(tr.rowIndex);
		}
	}
}

Можно и еще раз наверх подняться и удалить tr через обычный removeChild. Код не проверял.

p.s. однобуквенные имена переменных зло

Последний раз редактировалось Octane, 04.07.2009 в 15:45.
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2009, 17:02
Новичок на форуме
Отправить личное сообщение для Tankist Посмотреть профиль Найти все сообщения от Tankist
 
Регистрация: 04.07.2009
Сообщений: 3

Спасибо. Насчет rowIndex не знал. Может быть, подскажете хорошую литературу по JavaScript с подробным описанием функций?

P.S. Замечание по коду. Используя выражение
var tr = input.parentNode.parentNode;
я получал сообщение об ошибке. Вывел результат tr и получил, что в результате такого выражения тип tr HTMLTableElement. Я убрал один parentNode и получил уже HTMLTableRowElement, т.е.
var tr = input.parentNode;
В этом случае функция работает так как и надо.
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2009, 17:17
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,361

Сообщение от Tankist
Может быть, подскажете хорошую литературу по JavaScript
Флэнаган 5 http://depositfiles.com/ru/files/ji7w211oc
Ответить с цитированием
  #5 (permalink)  
Старый 04.07.2009, 17:20
Аватар для Octane
        
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane
 
Регистрация: 09.07.2008
Сообщений: 3,062

У вас input прямо в tr лежит? Вообще должно быть так:

<table>
     <tr>
        <td><input … /></td>
…


тогда первый раз parentNode выдаст td, а второй — tr.

Литературу не знаю, почти не читал книжек по JavaScript, на этом сайте есть несколько книг, возможно, в них есть это http://javascript.ru/book
Ответить с цитированием
  #6 (permalink)  
Старый 05.07.2009, 22:58
Новичок на форуме
Отправить личное сообщение для Tankist Посмотреть профиль Найти все сообщения от Tankist
 
Регистрация: 04.07.2009
Сообщений: 3

>>Octane: "Вообще должно быть так:"

Согласен с Вашим замечанием). Я просто для теста быстро накидывал, отсюда и строки без столбцов и однобуквенные переменные...

То, для чего тему открывал, сделал. Всем спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перемещение строк таблицы в Firefox barcelona jQuery 17 23.02.2009 14:41
ДИнамическое изминение таблицы Legi Элементы интерфейса 1 08.02.2009 03:10
Автоматическая подсветка строк таблицы mihha Элементы интерфейса 5 01.02.2009 00:28
Фиксированный заголовок таблицы ilshat Элементы интерфейса 6 19.12.2008 23:35
Динамическое изменение границ между столбцами таблицы srgg Элементы интерфейса 3 10.08.2008 13:40