Форум

ctocopok · #21 (**permalink**) 05.03.2011, 01:06

А почему один-то хедер не будет колонку растягивать?

От rowspan придется отказаться. понял. жаль. ну да ладно.
главное, чтобы colspan работал

а кто-нибудь что-нибудь знает про onmouseover для <col> ?
он и не должен отрабатывать?

ksa · #22 (**permalink**) 05.03.2011, 08:34

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

а кто-нибудь что-нибудь знает про onmouseover для <col> ?
он и не должен отрабатывать?

Так вроде никто такого и не обещал... Сам кол и так пока не очень-то поддерживается (может уже поддерживался) браузерами.

Aetae · #23 (**permalink**) 05.03.2011, 21:12

Чего тут сложного. Ставишь mouseover на всю таблицу, вычисляешь event.target/srcElement, находишь какой он по счёту(cellIndex) и меняешь у соответствующего col стиль.)

Кстати допилил чуток велосипед. Теперь он не зависит от ширины скроллбара и свободно растягивается на любую заданную ширину(можно и в процентах).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">window.onload=function(){
	var table=document.getElementsByTagName('table')[0];
	var cells=table.rows[table.rows.length-1].cells;
	var hoverDiv=document.createElement('div');
	hoverDiv.style.cssText="position:relative;height:10000px;margin-top:-10000px;background:#ddf;z-index:-1";
	table.onmouseover=function(e){
		var t=e?e.target:window.event.srcElement;
		while(t.tagName!='TD'&&t.tagName!='TABLE')t=t.parentNode;
		if(t.tagName=='TD') {
			cells[t.cellIndex].appendChild(hoverDiv);
		}
	}
}
</script>
<style type="text/css">
* {margin:0;padding:0}
.fHeader td, .fHeader tr{
	border:1px solid #bbb;
}
.fHeader {
	padding-top:24px;	/* высота загаловка, соот-но если больше 1 строки-увеличить. */
	width:100%; /*ширина*/
	height:102px;  /*высота - 24px на header,  -1px на нижний border*/
	/* background:#fdfffd; цвет таблицы по дефалту(не совместим с подсветкой колонок =) )*/
	font-family: MS Sans serif,Verdana,Arial;
	border-bottom:1px solid #bbb;
	position:relative;
	overflow:hidden;
}
.fHeaderScroll {
	border-right:1px solid #bbb;
	height:100%;
	overflow:auto;
	overflow-x:hidden;/*opera fix*/
}
.fHeader table {
	width:100%; 	
	border-collapse:collapse;
}
.fHeaderFix {
	zoom:1 /*ie fix*/
} 
.fHeader thead div{
	height:0;
	text-align:left;
	overflow:hidden;
}
.fHeader thead div div {
	height:22px; /* высота загаловка (-2px на border), соот-но если больше 1 строки-увеличить. */
	background:#ddd; /*цвет header'a по дефалту*/
	border:1px solid #aaa;
	position:absolute;
	top:0;
	width:300%;
	margin-left:-1px;
}
.fHeaderTop{
	margin-top:-24px; /* высота загаловка */
	height:22px; /* высота загаловка (-2px на border) */
	border:1px solid #aaa;
	position:relative;
	z-index:2;
}
.fHeader tfoot tr, .fHeader tfoot td {
	border-bottom:0 
}
.fHeader thead tr, .fHeader thead td{
	border-top:0;
}
</style>
</head>
<body>
<h3>Таблица спецсимволов html</h3>
<div class="fHeader">
	<div class="fHeaderTop">
	</div>
	<div class="fHeaderScroll">
		<div class="fHeaderFix">
			<table>
			<thead>
			<tr>
				<td>
					<div><div>Имя</div>Имя</div>
					 &amp;nbsp;
				</td>
				<td>
					<div><div>Код</div>Код</div>
					 &amp;#160;
				</td>
				<td>
					<div>	<div>Вид</div>Вид</div>
					 &nbsp;
				</td>
				<td>
					<div><div>Описание</div>Описание</div>
					 неразрывный пробел
				</td>
			</tr>
			</thead>
			<tbody>
			<tr><td>&amp;iexcl;</td><td>&amp;#161;</td><td>¡</td><td>перевернутый восклицательный знак</td></tr>
			<tr><td>&amp;cent;</td><td>&amp;#162;</td><td>¢</td><td>цент</td></tr>
			<tr><td>&amp;pound;</td><td>&amp;#163;</td><td>£</td><td>фунт стерлингов</td></tr>
			<tr><td>&amp;curren;</td><td>&amp;#164;</td><td>¤</td><td>денежная единица</td></tr>
			<tr><td>&amp;yen;</td><td>&amp;#165;</td><td>¥</td><td>иена или юань</td></tr>
			<tr><td>&amp;brvbar;</td><td>&amp;#166;</td><td>¦</td><td>разорванная вертикальная черта</td></tr>
			<tr><td>&amp;sect;</td><td>&amp;#167;</td><td>§</td><td>параграф</td></tr>
			<tr><td>&amp;uml;</td><td>&amp;#168;</td><td>¨</td><td>трема (знак над гласной для произнесения ее отдельно от предшествующей гласной; напр., na¨ve)</td></tr>
			<tr><td>&amp;copy;</td><td>&amp;#169;</td><td>©</td><td>знак copyright</td></tr>
			<tr><td>&amp;ordf;</td><td>&amp;#170;</td><td>ª</td><td>женский порядковый числитель</td></tr>
			<tr><td>&amp;laquo;</td><td>&amp;#171;</td><td>«</td><td>левая двойная угловая скобка</td></tr>
			<tr><td>&amp;not;</td><td>&amp;#172;</td><td>¬</td><td>знак отрицания</td></tr>
			<tr><td>&amp;shy;</td><td>&amp;#173;</td><td></td><td>место возможного переноса</td></tr>
			<tr><td>&amp;reg;</td><td>&amp;#174;</td><td>®</td><td>знак зарегистрированной торговой марки</td></tr>
			<tr><td>&amp;macr;</td><td>&amp;#175;</td><td>¯</td><td>знак долготы над гласным</td></tr>
			<tr><td>&amp;deg;</td><td>&amp;#176;</td><td>°</td><td>градус</td></tr>
			</tbody>
			<tfoot>
				<tr><td>&amp;bdquo;</td><td>&amp;#8222;</td><td>„</td><td>нижняя двойная кавычка</td></tr>
			</tfoot>
			</table>
		</div>
	</div>
</div>
</body>
</html>

.....upd
Ан нет, опера цучко не меняет динамически стиль у col, так что обломчик.

.....upd2
Добавил вариант подсветки колонок, не самый лучший, зато самый быстрый в случае больших таблиц.)
Велосипеды такие велосипеды.

ctocopok · #24 (**permalink**) 06.03.2011, 12:44

Aetae,
Супер-супериор.

Мне не хватает навыков для того, чтобы применить технику к своей таблице.

она (образно) такова:

<table border="1" cellpadding="0" >
<tr bgcolor="#ccffcc"><td colspan="2" align="center">ученик</td><td>оценка</td></tr>
<tr bgcolor="#ccffcc"><td>Имя</td><td>Фамилиё</td><td>&nbsp;</td></tr>

<tr><td>Вася</td><td>Пупкин</td><td>2</td></tr>
<tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
<tr><td>Миша</td><td>Печкин</td><td>2</td></tr>
<tr><td>Гриша</td><td>Овечкин</td><td>2</td></tr>
</table>

И вот хотелось бы ей обе стровчки-то и зафиксировать. Фиг с ним с RowSpan, он не так важен, но просто многострочность (два TR) нужна, и объединение заголовков в верхней строке тоже нужно.
Видимо, во второй строке тоже как-то дивы надо позиционировать, попадая ровно-ровно под дивы первой строки?

Aetae · #25 (**permalink**) 07.03.2011, 12:03

Для кого комменты ставил?)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">window.onload=function(){
    var table=document.getElementsByTagName('table')[0];
    var cells=table.rows[table.rows.length-1].cells;
    var hoverDiv=document.createElement('div');
    hoverDiv.style.cssText="position:relative;height:10000px;margin-top:-10000px;background:#ddf;z-index:-1";
    table.onmouseover=function(e){
        var t=e?e.target:window.event.srcElement;
        while(t.tagName!='TD'&&t.tagName!='TABLE')t=t.parentNode;
        if(t.tagName=='TD') {
            cells[t.cellIndex].appendChild(hoverDiv);
        }
    }
}
</script>
<style type="text/css">
* {margin:0;padding:0}
.fHeader td, .fHeader tr{
    border:1px solid #bbb;
}
.fHeader {
 *!*   padding-top:47px;    /* высота загаловка, соот-но если больше 1 строки-увеличить. */*/!*
    width:100%; /*ширина*/
    height:102px;  /*высота - 24px на header,  -1px на нижний border*/
    /* background:#fdfffd; цвет таблицы по дефалту(не совместим с подсветкой колонок =) )*/
    font-family: MS Sans serif,Verdana,Arial;
    border-bottom:1px solid #bbb;
    position:relative;
    overflow:hidden;
}
.fHeaderScroll {
    border-right:1px solid #bbb;
    height:100%;
    overflow:auto;
    overflow-x:hidden;/*opera fix*/
}
.fHeader table {
    width:100%;    
    border-collapse:collapse;
}
.fHeaderFix {
    zoom:1 /*ie fix*/
}
.fHeader thead div{
    height:0;
    text-align:left;
    overflow:hidden;
}
.fHeader thead div div {
    height:22px; /* высота загаловка (-2px на border), соот-но если больше 1 строки-увеличить. */
    background:#ddd; /*цвет header'a по дефалту*/
    border:1px solid #aaa;
    position:absolute;
    top:0;
    width:300%;
    margin-left:-1px;
}
*!*.fHeader div.fHeaderLower {*/!*
*!*     top:23px;*/!*
 *!*}*/!*

*!* .fHeader div.fHeaderMiddle {*/!*
 *!*    height:45px;/* высота загаловка (-2px на border) */*/!*
 *!*    line-height:45px;*/!*
 *!*}*/!*

*!*.fHeaderTop{*/!*
*!*    margin-top:-47px; /* высота загаловка */*/!*
*!*    height:45px; /* высота загаловка (-2px на border) */ */!*

    border:1px solid #aaa;
    position:relative;
    z-index:2;
}
.fHeader tfoot tr, .fHeader tfoot td {
    border-bottom:0
}
.fHeader thead tr, .fHeader thead td{
    border-top:0;
}
</style>
</head>
<body>
<div class="fHeader">
    <div class="fHeaderTop">
    </div>
    <div class="fHeaderScroll">
        <div class="fHeaderFix">
            <table>
            <thead>
            <tr>
                <td>
                    <div><div>ученик</div></div>
                    <div><div class="fHeaderLower">Имя</div>Имя</div>
                    Вася
                </td>
                <td>
                    <div><div class="fHeaderLower">Фамилиё</div>Фамилиё</div>
                     Пупкин
                </td>
                <td>
                    <div><div class="fHeaderMiddle">оценка</div>оценка</div>
                    2
                </td>
            </tr>
            </thead>
            <tbody>

              <tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
              <tr><td>Миша</td><td>Печкин</td><td>2</td></tr>
              <tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
              <tr><td>Миша</td><td>Печкин</td><td>2</td></tr>
              <tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
              <tr><td>Миша</td><td>Печкин</td><td>2</td></tr>
              <tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
              <tr><td>Миша</td><td>Печкин</td><td>2</td></tr>

            </tbody>
            <tfoot>
                <tr><td>Гриша</td><td>Овечкин</td><td>2</td></tr>
            </tfoot>
            </table>
        </div>
    </div>
</div>
</body>
</html>

ctocopok · #26 (**permalink**) 07.03.2011, 12:48

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

Для кого комменты ставил?)

Я был очень, ОЧЕНЬ невнимателен. не заметил классов "хедер миддл" и "хедер нижний"

Спасибо!! Буду тестить.

Aetae · #27 (**permalink**) 07.03.2011, 12:57

Ну они какбэ очевидны.)

Aetae · #28 (**permalink**) 08.03.2011, 12:49

Всё основано на том что элемнты с position:absolute отсчитывает вою позицию от ближайшего родителя с position отличной от static(по умолчанию)

<style type="text/css">div {border:1px solid #050;padding:1px;}</style>
<div style="position:relative">
  relative
  <div style="overflow:auto;height:80px">
    обычный
    <span style="position:absolute;top:0">/absolute/</span>
    текст
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</div>

Андрей38 · #29 (**permalink**) 20.03.2011, 11:59

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

Сделать подсветку строчек не проблема - onMouseOver и onMouseOut для <tr> спасают вебмастера.

Но вот проблема. Таблица - просто стена текста (даже больше цифирей), и это все как-то сплошняком. Хочется улучшить читабельность путем выделения не только строки, но и столбца - подсветкой.

Для справки, строк до 108 в таблице, столбцов - порядка 28.
Данные, в основном, числовые, иногда десятичные дроби, иногда целые числа.

Размышлял, додумался лишь до проставления каждой ячее таблицы свойств onMouseXXX, и в обработчиках вычислять (по id, наверное), что за ячея событие вызвала, к какому столбцу принадлежит, затем все ячеи в этом столбце "красить" или класс им менять.
Может, есть попроще решения?

Еще вопрос. Как сделать заголовок у таблицы неподвижным (не скроллящимся), а скроллить только тело таблицы? Аналог "закрепить области" в экселе.

Заранее благодарен.

...Нашел переключатель подсветки для колонок в виде плагина. Вопрос еще актуален ?

ctocopok · #30 (**permalink**) 20.03.2011, 12:54

немного актуален. если можно, ссылку, пожалуйста, я поглядел бы.

Форум

Справочник

Discord чат

Курсы javascript