Javascript.RU

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

Изменение свойств таблицы на лету
Преамбула:
Есть html-страница, с табличной версткой. Все стили заданы через CSS.
Вот кусочек таблицы с интересующими элементами:
<style>
div.abs {
  position: absolute;
  vertical-align: top;
  top: 0;
  right: 0; }
</style>
<table><tr><td>
  <table class="Header" width="100%"><tr>
    <td class="left">Левая часть<td>
    <td class="right">Правая часть<td>
  </tr></table>
  <table>
  .....
  </table>
  <div class="abs">content<div>
</td></tr></table>

Как видно из примера внутри таблицы-контейнера находится несколько вложенных таблиц, расположенных по-вертикали одна под другой. Ширина контейнер явно не указана, отчего вся конструкция является резиновой и подстраивается под контент и под ширину браузера.
В самом низу контейнера добавлен один див с абсолютным позиционированием в правом верхнем углу. Содержимое этого дива заранее не известно, отчего и весь головняк.

Вот какая передо мной стоит задача:
С помощью js узнать размеры дива с классом 'abs' (ширину и высоту), установить для td с классом 'right' ширину, равную ширине этого дива.
Сделать это для каждой таблицы класса 'Header' на странице, т.е. привязать код только к имени класса (если такое вообще возможно).

Скажу честно, с javascript сталкиваться не приходилось, в основном обходился css, но тут вот такая задача. Поэтому большая просьба знающим людям - напишите какой-нибудь черновой вариант, чтобы было куда копать.
Заранее Спасибо.

Последний раз редактировалось Maestr0, 10.03.2012 в 01:02.
Ответить с цитированием
  #2 (permalink)  
Старый 10.03.2012, 11:02
Аспирант
Отправить личное сообщение для karmis Посмотреть профиль Найти все сообщения от karmis
 
Регистрация: 25.06.2011
Сообщений: 44

использую jQuery

var widthAbs=$('.abs').width() //  узнаю ширину abs
var heightAbs=$('.abs').height() //  узнаю высоту abs

// установить для td с классом 'right' ширину, равную ширине этого дива
$('table.Header.right').css({'width':widthAbs+'px'});

// Сделать это для каждой таблицы класса 'Header' на странице, т.е. привязать код только к имени класса (если такое вообще возможно)
$('table tbody tr td table.Header tbody tr td.right').css({'wifth':widthAbs+'px'});
Ответить с цитированием
  #3 (permalink)  
Старый 10.03.2012, 14:55
Профессор
Отправить личное сообщение для nikita.mmf Посмотреть профиль Найти все сообщения от nikita.mmf
 
Регистрация: 01.02.2010
Сообщений: 364

karmis,
ваши последние две строки не дадут желаемого результата во всех браузерах
// установить для td с классом 'right' ширину, равную ширине этого дива
$("td.right").filter(function(){ return $(this).closest("table").hasClass("header") }).width(widthAbs);
Ответить с цитированием
  #4 (permalink)  
Старый 10.03.2012, 17:51
Новичок на форуме
Отправить личное сообщение для Maestr0 Посмотреть профиль Найти все сообщения от Maestr0
 
Регистрация: 10.03.2012
Сообщений: 2

не хочется подключать jQuery,
вот что удалось, читая справочник по js, написать за ночь :
// ищем вложенный div с классом 'Price'
div_arr = document.getElementsByTagName('div');
for (var da = 0; da < div_arr.length; da++)
	if (div_arr[da].className == 'Price') {
		div_width = div_arr[da].clientWidth;

		// скользим по соседям вверх в поисках table с классом 'Header'
		table_header = div_arr[da];
		while (table_header = table_header.previousSibling)
			if (table_header.className == 'Header') {

				// ищем вложенный td с классом 'right'
				for (var cell = 0; cell < table_header.cells.length; cell++)
					if (table_header.cells[cell].className == 'right') {
						// устанавливаем ширину td равной ширине div'a
						table_header.cells[cell].style.width = div_width;
						break;
					}
				break;
			}
	}

Прокомментируйте пожалуйста, как сделать оптимальнее.
Это вроде работает, но во всех ли браузерах - вопрос (у меня Опера)

Последний раз редактировалось Maestr0, 10.03.2012 в 18:33.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое изменение background-a в ячейках таблицы Gh0stik Events/DOM/Window 15 02.08.2012 19:40
Изменение окраски строк таблицы, исходя из данных? Space-06 Events/DOM/Window 4 14.02.2012 21:32
Изменение цвета ячейки в таблице, при наведении на строку другой таблицы Psychosonic Общие вопросы Javascript 12 24.11.2010 16:44
Запрос на изменение кодировки таблицы и БД Golovastik Серверные языки и технологии 14 12.11.2010 23:33
jQuery - переключение свойств у таблицы FladeX Работа 2 19.02.2010 11:31