Изменение свойств таблицы на лету
Преамбула:
Есть 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, но тут вот такая задача. Поэтому большая просьба знающим людям - напишите какой-нибудь черновой вариант, чтобы было куда копать. Заранее Спасибо. |
использую 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'}); |
karmis,
ваши последние две строки не дадут желаемого результата во всех браузерах // установить для td с классом 'right' ширину, равную ширине этого дива $("td.right").filter(function(){ return $(this).closest("table").hasClass("header") }).width(widthAbs); |
не хочется подключать 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. |