Изменение свойств таблицы на лету
Преамбула:
Есть 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, время: 04:51. |