Здравствуйте. У меня есть вот такая таблица: | Код |
<html>
<head>
<title>TableAuto</title>
</head>
<body>
<table width='100%' border='1' style = border-collapse:'collapse'>
<tr>
<td width='25%' style = text-align:'center'>Марка автомобиля</td>
<td width='25%' style = text-align:'center'>Год выпуска</td>
<td width='25%' style = text-align:'center'>Объем двигателя</td>
<td width='25%' style = text-align:'center'>Цвет</td>
</tr>
<tr>
<td colspan=4 style = text-align:'center'>Раздел 1</td>
</tr>
<tr>
<td style = text-align:'center'>.......</td>
<td style = text-align:'center'>......</td>
<td style = text-align:'center'>.......</td>
<td style = text-align:'center'>.......</td>
</tr>
<tr>
<td style = text-align:'center'>.......</td>
<td style = text-align:'center'>......</td>
<td style = text-align:'center'>.......</td>
<td style = text-align:'center'>.......</td>
</tr>
<tr>
<td style = text-align:'center'>.......</td>
<td style = text-align:'center'>......</td>
<td style = text-align:'center'>.......</td>
<td style = text-align:'center'>.......</td>
</tr>
</table>
</body>
|
 Мне нужно сделать так, чтобы в окне браузера было возможно изменять размер каждого столбца. Т.е можно было бы схватить левой кнопкой мыши за линию таблицы, которая делит две ячейки и переместить ее на новое место. В инете Я нашел похожий прием, однако так изменение всей таблицы. Вот он скопируйте его к себе посмотрите пожалуйста | Код |
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<META name="keywords" content="javascript html документация программа пример справочник php XMLHttpRequest xml dhtml JScript website вебдизайн ajax">
<META name="description" content="документация по Javascript">
<META name="robots" content="index,follow">
<META content="Igor Svetlov" name=author>
<META content="Copyright (c) Igor Svetlov, 2005" name=copyright>
<META content=Global name=distribution>
<META content=General name=rating>
<link rel="shortcut icon" type=image/x-icon href=/favicon2.ico>
<body>
<style>.aTb{border-bottom:1px solid}.aTb a{color:#903;text-decoration:none;font-size:12px}body{margin:0 0 88px 6px;padding:0;font-family:Verdana,Arial,Helvetica,sans-serif}</style><table width=771 class=aTb><tr align=center><td width=2%><img src=/images/favicon3.gif width=16 height=16><script>d=document;bh='<base href="';if((l=location.href).search('file:/')==0)d.write(bh+'http://js2.ru">')</script></td><td width=10% title="Сайт по Javascript"><a href=/>js2.ru</td><td title=Демонстрации_JS><a href=/example/xmps.shtml>Примеры кодов</td><td title=Оригинальные_материалы><a href=/articles.shtml>Статьи</td><td title=JS:объекты,методы,свойства(архив)><a href=/files/>Документация</td><td title="найти ответ /
задать вопрос по JS"><a href=/wrforum/>Форум</td><td title=Ресурсы_Javascript><a href=/article4.shtml>Ссылки</td></tr></table><script>d.write(bh+l+'">')</script>
<style>
.tbR{border:6px solid white;width:350px;table-layout:fixed;}
.tbR .tdResize{cursor:w-resize;cursor:col-resize;background-color:#FFD47F;width:1px;width=4px}
.tabHead{overflow:hidden;text-overflow:ellipsis;}
.tbR td{border:1px solid darkred;}
.tbR td .tabContent{color:#999;overflow:hidden;}
.pt3{float:right;display:none;border-collapse:collapse;border:0px}
</style>
<b>Управление видимостью текста в ячейке в зависимости от ширины.</b><br>
<i>(хватайте за разделитель колонки и тащите)</i><br><br>
<table class=tbR cellspa cing=3><tr>
<td id=tdTb1 class=tdTab>
<table id=divTdPt1 class=pt3 style=border:0><tr><td style=border:0>...</td></tr></table>
<div id=divTdTb1 class=tabHead>
<span id=divTdSp1>0000sssssssssssssssssssssssssss</span>
</div>
</td>
<td id=tdResize1 class=tdResize width=2 bgcolor=996666></td>
<td id=tdTb2 class=tdTab>
<table id=divTdPt2 class=pt3 style=border:0><tr><td style=border:0>...</td></tr></table>
<div id=divTdTb2 class=tabHead>
<span id=divTdSp2>0000sssssssssssssssssssssssssss</span>
</div>
</td>
<td id=tdResize2 class=tdResize width=2 bgcolor=996666></td>
</tr>
<tr>
<td class=tdContent><div class=tabContent>12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 </div></td>
<td id=tdResizC1 class=tdResize bgcolor=996666></td>
<td class=tdContent><div class=tabContent>67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 </div></td>
<td id=tdResizC2 class=tdResize bgcolor=996666></td>
</tr>
</table>
<br>
<table class=tbR><tr>
<td id=tdTb3 class=tdTab>
<table id=divTdPt3 class=pt3 style=border:0><tr><td style=border:0>...</td></tr></table>
<div id=divTdTb3 class=tabHead>
<span id=divTdSp3>0000sssssssssssssssssssssssssss</span>
</div>
</td>
<td id=tdResize3 class=tdResize width=2 bgcolor=996666></td>
</tr>
<tr>
<td class=tdContent><div class=tabContent>12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 </div></td>
<td id=tdResizC3 class=tdResize bgcolor=996666></td>
</tr>
</table>
<script>d=document;g=function(a){return d.getElementById(a);}
var FF=d.all==null; /*isGecko*/
var mDown=0; //установки скрипта
var posX; //переменные скрипта
onload=function(){tdTab=[];tdTab[1]=g('tdTb1');tdTab[2]=g('tdTb2');tdTab[3]=g('tdTb3');
if(IE=d.all&&!self.opera)g('divTdPt1').style.display='none';
widPt3=IE?0:g('ptPt3').offsetWidth+2;
}
d.onmousedown=function(e){var t;
if((t=FF?e.target:event.srcElement).className!="tdResize")return; //отсечка лишнего
mDown=t.id.charAt(8);
posX=(FF?e.pageX:event.x+d.body.scrollLeft)-tdTab[mDown].offsetWidth; //начальная точка захвата
posTbl=(FF?e.pageX:event.x+d.body.scrollLeft)-g('tdResize'+mDown).offsetParent.offsetWidth;
}
d.onmousemove=function eMove(e){if(!mDown)return;
tdTab[mDown].style.width=
xx=Math.max(0,(FF?e.pageX:event.x+d.body.scrollLeft)-posX);
g('tdResize'+mDown).style.width=IE?4:1;
isPt3=(g('divTdSp'+mDown).offsetWidth>g('divTdTb'+mDown).offsetWidth)?widPt3:0;
g('divTdPt'+mDown).style.display=IE||!isPt3?'none':'table';
g('d2').innerHTML
=g('divTdSp'+mDown).offsetWidth+' '
+g('divTdTb'+mDown).offsetWidth+' '
+isPt3
g('divTdTb'+mDown).style.width=xx-isPt3;
g('tdResize'+mDown).offsetParent.style.width=(Math.max(0,(FF?e.pageX:event.x+d.body.scrollLeft)-posTbl))+6;
}
d.onmouseup=function(e){mDown=0;}
d.ondragstart=d.onselectstart=function(){if(event.srcElement.className=="tdResize")event.returnValue=!1;}
</script>
<div id=d2><span id=ptPt3 sty le=visibility:hidden>...</span></div>
|
Я JS только собираюсь изучать, подскажите пожалуйста как можно реализовать эту динамику в моеи примере, очень Вам буду благодарен. Спасибо! Это сообщение отредактировал(а) yngwie19 - 11.11.2009, 00:29 |
изменение ширины столбцов таблицы 
Загрузка ...
