Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменение свойств таблицы на лету (https://javascript.ru/forum/dom-window/26473-izmenenie-svojjstv-tablicy-na-letu.html)

Maestr0 10.03.2012 00:55

Изменение свойств таблицы на лету
 
Преамбула:
Есть 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, но тут вот такая задача. Поэтому большая просьба знающим людям - напишите какой-нибудь черновой вариант, чтобы было куда копать.
Заранее Спасибо.

karmis 10.03.2012 11:02

использую 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'});

nikita.mmf 10.03.2012 14:55

karmis,
ваши последние две строки не дадут желаемого результата во всех браузерах
// установить для td с классом 'right' ширину, равную ширине этого дива
$("td.right").filter(function(){ return $(this).closest("table").hasClass("header") }).width(widthAbs);

Maestr0 10.03.2012 17:51

не хочется подключать 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;
			}
	}

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


Часовой пояс GMT +3, время: 01:36.