как обратиться к таблице из ячейки
Всем привет. Например есть таблица
<table id="table" width="300px" height="200px"> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </table> Мне нужно что бы при кликанье по любой ячейки можно было добраться до параметров таблицы,т.е в нашем случае до width и height ну и id. вставляю в ячейки <td> следующий код <td onclick="alert(this.parentNode.parentNode.id);">...</td> alert выдает пустоту, как же добраться до основного родителя из ячейки?? :( |
Ещё один parentNode вам поможет, ибо tbody.
Но по-хорошему надо просто сделать нужные переменные, чтоб не лезть каждый раз. |
tbody помогло :)
спасибо |
Aetae, аха) Я сейчас тоже потихоньку перехожу к изученю объектной модели (DOM). По идее, немного странно, ведь тег <tbody> не упоминается при построении таблицы.
simple, может это пригодится Выделение строки и столбца относящихся к ячейке таблицы <td onclick="alert(this.offsetParent.nodeName);">...</td> |
nerv_ спасибо, красивый способ, все работает :)
|
У меня вот еще вопрос возник..написал функцию которая создает макет модального окна, некоторым элементам присваиваю id для дальнейшей обработки, например для resiza id="left" id="top" и.т.д. Если я создам этой функцией несколько окон то ничего страшного не будет если будут дублироваться id-ы. Так то пробовал все работает, ошибку вроде не выдает,(что удивительно ведь id должен быть уникальный) просто хотелось узнать может есть более правильный способ?
|
Цитата:
Только поддерживать ту уникальность должен разработчик. ;) |
Вообще конечно с id это фэил в первую очередь разрабов, а уж потом начинающих прогеров: отсутствие изначально способа группировки элементов.
Уникальный идентификатор есть, а групповго нет. Есть name, но не для любого элемента. Есть class, но во-первых не для того он придуман, во вторых - ie. И приходится всем юзать class=( |
решил тогда отказаться от id и добираться до нужных элементов с помощью ветвлений childNodes и parentNode..Но тут тоже без сюрпризов не обходиться, вот например таблица расположенная в теги <div>:
<div> <table id="table">// obj.childNodes[1].id выведет "table" <thead id="thead">// obj.childNodes[1].childNodes[1].id выведет "thead" <tr> <th>...</th> <th>...</th> <th>...</th> </tr> </thead> <tbody id="tbody">//obj.childNodes[1].childNodes[2].id выведет "undefined" ???? <tr>// а вот obj.childNodes[1].childNodes[3].id покажет "tbody" <td>...</td> <td>...</td> <td>...</td> </tr> </tbody> </table> </div> Собственно вопрос что находиться в obj.childNodes[1].childNodes[2].id ??? Почему такой перескок через цифру ведь по идеи tbody должна быть вторым ребенком у таблице? |
Цитата:
<table> <thead> ... </thead> *!* <tfoot> <tr> <td> ... </td> </tr> </tfoot> */!* <tbody> ... </tbody> </table> http://htmlbook.ru/html/tfoot |
childNodes включает в себя текстовые ноды
obj.childNodes[1].childNodes[2] - '\n' Можно юзать children //ff3.6+ ...но не нужно) А нужно вам скорее всего getElementsByTagName() |
точно getElementsByTagName()! да и по поводу тега <foot> тоже новость, не знал что он именно так позиционируется в таблице :)
Вот еще вопрос, можно ли как нибудь в этом диве зафиксировать шапку таблицы т.е <thead> чтобы при скролле она стояла на месте? игрался с position..не выходит что то. <div style="overflow:auto;width:300px;height:150px;"> <table> <thead>// Нужно чтоб это не прокручивалась..как бы это сделать :help: <tr> <th>...</th> <th>...</th> <th>...</th> </tr> </thead> <tbody id="tbody"> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </tbody> </table> </div> |
Цитата:
Но она с "оговорками". Т.е. не всё так просто... |
simple, может быть position: absolute/fixed. Хотя насчет части таблицы не уверен.
|
Цитата:
|
nerv_ ,нет absolute/fixed не подходят, так как при таком позиционирование они выходят за область дива...сделал position:relative и добавил js на скролл...работает..но что то первая ячейки в теги <tbody> расширяются на весь <thead>. Вот пример:
<script>
function scrolltmp(obj,num){
obj.childNodes[1].childNodes[1].style.top=num;
}
</script>
<div style="width:300px;height:120px;overflow:auto;" onscroll="scrolltmp(this,scrollTop);">
<table border=1 style="border-collapse:collapse;">
<thead style="position:relative;top:0px;left:0px;display:block;">
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
<th>...</th>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
//......................................
</tbody>
</table>
</div>
вероятно это из-за display:block но без него не работает, как можно исправить это или альтернативный вариант какой нибудь есть? ЗЫ да и не оптимальное это решение а так просто понять суть тока...при прокрутке заголовок дергается =) |
Примеры есть но их хрен найдёшь здесь.)
Если надо на js гугли javscript fixed header Если на чистом css, вот мой велосипед): http://javascript.ru/forum/95221-post23.html |
Цитата:
Я просто для себя суть тех примеров запомнил... Если припрёт - детали вспомнятся по ходу дела... :D |
Идейка с шапкой таблицы там используется вот такая...
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
position: relative;
border: 1px solid red;
}
.tab {
height: 31px;
}
table {
border-collapse: collapse;
}
th {
height: 30px;
}
th,
td {
width: 50px;
border: 1px solid;
}
thead {
position: absolute;
top: 0;
}
.table_data {
height: 50px;
overflow: auto;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='container'>
<div class='tab'></div>
<div class='table_data'>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>2</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>3</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>4</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>5</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
|
С фиксированной шириной то это раз плюнуть, вообще заморачиваться не нужно.)
А если используешь js то сделать её фиксированной и вся недолга. Вообще - основная проблема в ie. Ваш КО. |
С JSом-то конечно! :D
|
таблицу с фиксированным заголовком я делать умею :D
я делаю модальное окно и мне нужно чтобы именно в окне, т.е в div фиксировалась шапка таблицы. |
Цитата:
В моём примере, именно в диве шапка и фиксируется... |
Да это не то, это как обычная таблица с фиксированным заголовком...правда все это можно сделать и без этой кучи div и js..просто одна таблица и tbody overflow...мне же нужно чтобы обыяная таблица была в окне div и у которй шапка была бы закреплена. Это для модальног окна мне надо, чтоб можно было растягивать перемещать и.т.д
|
Нарисуйте, а?
Тут даже мои телепатические навыки пасуют. |
Цитата:
|
ну я для себя так делаю когда мне нужны такие таблицы:
<html>
<head>
<style type="text/css">
table,tbody
{
display: inline-block;
}
tbody
{
width:100%;
height: 100px;
overflow: auto;
overflow-x:hidden;
}
td
{
min-width: 60px;
text-align:left;
}
</style>
</head>
<body>
<table border=1 style="border-collapse:collapse;font-family:ms sans serif;font-size:11px;background:#fff;">
<thead>
<tr bgcolor=#ccc>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
<td>eee</td>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</body>
</html>
:) |
Работает только в ff
|
не знаю...у меня и в опере и сафари и в хроме пашет + фф..ну на ие я забил уже давно )
|
simple, CSS: display
|
Похоже невозможно сделать то что я хочу таким обычным способом, просто div с overflow не подходит..придется юзать плавающии фреймы..и как я раньще про них не вспомнил, ведь они идеально подходят для модальных окон и код-логику окна можно разделить раскидав их по нужным фреймам, а не загружать весь код в одной странице html...эврика вообщем! :write:
|
что то скроллинг никак в iframe сделать не получается..
<iframe src="table.html" scrolling="yes" width="300" height="200"></iframe> в хроме, опере,фф,сафари нету скролла..в убогом ИЕ есть |
| Часовой пояс GMT +3, время: 05:33. |