Форум

Aetae · #11 (**permalink**) 20.12.2011, 13:47

childNodes включает в себя текстовые ноды
obj.childNodes[1].childNodes[2] - '\n'
Можно юзать children //ff3.6+
...но не нужно)

А нужно вам скорее всего getElementsByTagName()

simple · #12 (**permalink**) 20.12.2011, 14:09

точно 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>

ksa · #13 (**permalink**) 20.12.2011, 14:16

Сообщение от simple

можно ли как нибудь в этом диве зафиксировать шапку таблицы т.е <thead> чтобы при скролле она стояла на месте?

На этом форуме есть даже примеры такой "фиксации"...

Но она с "оговорками". Т.е. не всё так просто...

nerv_ · #14 (**permalink**) 20.12.2011, 14:19

simple, может быть position: absolute/fixed. Хотя насчет части таблицы не уверен.

ksa · #15 (**permalink**) 20.12.2011, 14:22

Сообщение от nerv_

fixed

Это уже относительно всего окна браузера... А не "относительно тела таблицы"...

simple · #16 (**permalink**) 20.12.2011, 14:28

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 но без него не работает, как можно исправить это или альтернативный вариант какой нибудь есть?
ЗЫ да и не оптимальное это решение а так просто понять суть тока...при прокрутке заголовок дергается =)

Aetae · #17 (**permalink**) 20.12.2011, 14:51

Примеры есть но их хрен найдёшь здесь.)
Если надо на js гугли javscript fixed header

Если на чистом css, вот мой велосипед):
Подсветка столбцов таблицы

ksa · #18 (**permalink**) 20.12.2011, 15:01

Сообщение от Aetae

Примеры есть но их хрен найдёшь здесь.)

Это - да...

Я просто для себя суть тех примеров запомнил... Если припрёт - детали вспомнятся по ходу дела...

ksa · #19 (**permalink**) 20.12.2011, 15:14

Идейка с шапкой таблицы там используется вот такая...

<!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>

Aetae · #20 (**permalink**) 20.12.2011, 15:18

С фиксированной шириной то это раз плюнуть, вообще заморачиваться не нужно.)
А если используешь js то сделать её фиксированной и вся недолга.

Вообще - основная проблема в ie.
Ваш КО.

Форум

Справочник

Discord чат

Курсы javascript