Изменение ширины таблицы джаваскриптом

 
0
 
JavaScript
ava
Vidocq | 15.12.2004, 11:45
Нужно получить возможность делать ширину таблицы меньше, чем ширина текста в ячейках так, чтобы границы ячейки срезали часть (или весь текст). Как этого добиться?
Kommentare (27)
ava
Се ля ви | 15.12.2004, 12:46 #
В CSS есть два свойства - overflow и clip. Первое определяет способ отображения содержимого блока, когда оно не влазит в его размеры. По-умолчанию оно установлено в visible, что означает, что блок расширяется и показывает всё, что в нём есть. Можно поставить hidden (не влазящие данные будут отсекааться) или scroll (появятся полосы прокрутки для внутренней области блока).
Свойство clip определяет смещение области отсечения относительно рамеров блока. По-умолчаанию они совпадают с размерами блока, но можно указать rect(top, right, bottom, left) - и область отсечения будет отступать от внутренних границ блока со всех сторон на указанные значения.

Вобщем, в простейшем варианте, указываешь жестко размер ячейки и прописываешь для неё overflow: hidden; Для болеее сложных вещей - играйся с этими параметрами smile
ava
Vidocq | 15.12.2004, 13:43 #
к Се Ля Ви
А как получить к этому overflow доступ из скрипта?

function resize(tableId, width) {    
var table = document.getElementById(tableId);
if(table)
{
table.style.width = width;
table.style.overflow =hidden;//вот здесь чего-то ошибка :(
}
}
ava
Alx | 15.12.2004, 14:25 #
Vidocq
hidden в кавычки ;-)
ava
Vidocq | 15.12.2004, 14:32 #
да, ещё вопрос: где можно найти какую-нить литературу по css?
später ergänzt:
2 ALEXANDRO
поставил кавыки,
всё равно не рулит :(


<html>
<head>
<script>
function resize(tableId, width) {
var table = document.getElementById(tableId);
if(table)
{
table.style.width = width;
table.style.overflow ="hidden";
}
}
</script>
</head>
<body>
<table border = 1 id = "t1">
<tr id="tr1">
<td>Test</td>
<td>Test1</td>
<td>Test2</td>
</tr>
<tr id="tr1">
<td>Test</td>
<td>Test1</td>
<td>Test2</td></tr>
<tr>
<td>Test</td>
<td>Test1</td>
<td>Test2</td>
</tr>
</table>
new size
<input id = "inWidth">
<input type = "button" onclick = "resize('t1', document.getElementById('inWidth').value)" value = "apply">
</body>
</html>
ava
Vidocq | 15.12.2004, 14:51 #
это канеша бред, так как сначала должно идти

table.style.overflow ="hidden";

а уже потом
table.style.width = width;
....
И всё равно не работает :stena smile
ava
Vidocq | 15.12.2004, 16:18 #
Блин, как оно ваще работает это overflow???
ava
Sardar | 15.12.2004, 23:53 #
Vidocq на счёт документации смотри в закреплённом топике "хорошая документация", особенно интересно здесь: http://wdh.suncloud.ru/

Твоя проблема решается помещением таблицы в слой и для него задай style.overflow="hidden". Задача странная, может проще скрыть некоторые колонки, а при полном просмотре показать их все?
ava
Vidocq | 16.12.2004, 13:27 #
2 Sardar
Цитата
Задача странная, может проще скрыть некоторые колонки, а при полном просмотре показать их все?


Слабо представляю, как это сделать. ;-)

Лучше попробую со слоями повыпендриваться.

smile
ava
Vidocq | 16.12.2004, 14:29 #
не знаю но вот эта дрянь не работает:


<html>
<head>
<script>
function resize(tableId, width, layerId) {
var layer = document.getElementById(layerId);
var table = document.getElementById(tableId);
if(table)
{
layer.style.overflow ="hidden";
layer.style.width = width;
table.style.width = width;
table.style.height =width;

}
}
</script>
</head>
<body>

<layer id='L1' name=tb1 z-index=0 left=0 top=0 width=100>

<table width=100 border = 1 id = "t1">
<tr id="tr1">
<td width>Test</td>
<td>Test1Test1Test1Test1Test1Test1</td>
<td>Test2</td>
</tr>
<tr id="tr1">
<td>Test</td>
<td>Test1</td>
<td>Test2</td></tr>
<tr>
<td>Test</td>
<td>Test1</td>
<td>Test2</td>
</tr>
</table>
</layer>


new size
<input id = "inWidth">
<input type = "button" onclick = "resize('t1', document.getElementById('inWidth').value, 'L1')" value = "apply">
</body>
</html>


текст из ячейки как растягивал её, так и растягивает и не собирается прятаться

[doHTML]<style type="text/css">
.ribbon {
z-index: 100;
position: absolute;
right: 20px;
top: 20px;
background-image: url(http://student.dn.ua/ya/ribbon.png) !important;
background-image: url(http://student.dn.ua/ya/ribbon.gif); /* ie :( */
background-repeat: no-repeat;
width: 150px;
height: 193px;
cursor: pointer;
}
</style>

<div class="ribbon" onclick="window.location='http://student.dn.ua/ya.shtml'"></div>[/doHTML]
ava
Sardar | 16.12.2004, 16:37 #
И откуда ты такие старые элементы достаешь, хотя для ИЕ должно быть по барабану...
А забыл ты для слоя позицию прописать, она либо абсолютной либо релативной должна быть, по другому не катит ;-)

<html> 
<head>  
<s c ript language="JavaScript" type="text/javascript">
function resize(tableId, width, layerId) {
var layer = document.getElementById(layerId);
if(layer)  layer.style.width = width;
}  
</sc ript>
</head>
<body>  

<div id='L1' style="position: relative; overflow: hidden; z-index: 0; left:0; top:0;">
<table width="100%" border = 1 id = "t1">  
<tr id="tr1">
<td width>Test</td>
<td>Test1Test1Test1Test1Test1Test1</td>
<td>Test2</td>
</tr>  
<tr id="tr1">
<td>Test</td>
<td>Test1</td>
<td>Test2</td></tr>  
<tr>
<td>Test</td>
<td>Test1</td>
<td>Test2</td>
</tr>  
</table>
</div>

   
new size
<input id = "inWidth">
<input type = "button" onclick = "resize('t1', document.getElementById('inWidth').value, 'L1')" value = "apply">
</body>
</html>


P.S. Подсветка код убивает, потому теги script криво назвал. Поправь перед запуском.
ava
Vidocq | 01.02.2005, 11:58 #
Sardar
Класс!!! ТО, что надо! ]()

А как теперь сделать то же самое, только для какого-нить одного столбца? К примеру, для того, у которого много TEST' ов?
Подсунуть слой только для столбца?

Типа:

<div id='L1' style="position: relative; overflow: hidden; z-index: 1; left:0; top:0;">
<td id="td1">Test1Test1Test1Test1Test1Test1</td>
</div>

ava
Sardar | 02.02.2005, 03:05 #
Нет, так не пройдёт, нужно оборачивать содержимое каждой ячейки в столбце в слой, либо задавать "position: relative; overflow: hidden;" + размеры для самих ячеек, что более правильно.
ava
Vidocq | 02.02.2005, 13:03 #
Sardar
то есть для каждой td


<td id="td" style="position: relative; overflow: hidden; z-index: 0; left:0; top:0;">Test</td>

при этом передавая id="td" в функцию resize()

Или нет?



ava
Sardar | 03.02.2005, 00:16 #
Не совем, нужно как я сказал выше перебирать все ячейки в колонке, оборачивать содержимое в слой, который и будет обрезать содержимое. Вот пример:
HTML
<table width=100 border = 1 id = "t1">
<tr id="tr1">
<td width>Test</td>
<td>Test1Test1Test1Test1Test1Test1</td>
<td>Test2</td>
</tr>
<tr id="tr1">
<td>Test</td>
<td>Test1</td>
<td>Test2</td></tr>
<tr>
<td>Test</td>
<td>Test1</td>
<td>Test2</td>
</tr>
</table>

function resizeColumn(id, index, width) {
var tb=document.getElementById(id), dv;
if(tb.rows[0].cells.length<=index) return;
for(var i=0; i<tb.rows.length; i++) {
dv=document.createElement("DIV");
dv.style.position="relative";
dv.style.overflow="hidden";
dv.style.width=width+"px";
for(var j=0; j<tb.rows[i].cells[index].childNodes.length; j++)
dv.appendChild(tb.rows[i].cells[index].childNodes[j]);
tb.rows[i].cells[index].appendChild(dv);
}
}

//ставим вторую колонку в 30 пикселей
resizeColumn("t1",1,30);
ava
Vidocq | 03.02.2005, 12:52 #
Sardar
Уменьшение ширины работает. Но после того, как я восстановляю ширину - пропадает (обрезается) текст внутри ячейки...
Как сделать, чтоб он там оставался после восстановления ширины?
ava
Sardar | 03.02.2005, 14:25 #
Тогда перепишем пример:

function resizeColumn(id, index, width) {
var tb=document.getElementById(id), dv;
if(tb.rows[0].cells.length<=index) return;
for(var i=0; i<tb.rows.length; i++) {
dv=tb.rows[i].cells[index].firstChild; //первый элемент в ячейке
dv.style.position="relative";
dv.style.overflow="hidden";
dv.style.width=width+"px";
}

function restoreColumn(id, index) {
var tb=document.getElementById(id), dv;
if(tb.rows[0].cells.length<=index) return;
for(var i=0; i<tb.rows.length; i++) {
dv=tb.rows[i].cells[index].firstChild; //первый элемент в ячейке
dv.style.position="static";
dv.style.overflow="visible";
dv.style.width="auto";
}

HTML
<table width=100 border = 1 id = "t1">
<tr id="tr1">
<td width><span>Test</span></td>
<td><span>Test1Test1Test1Test1Test1Test1</span></td>
<td><span>Test2</span></td>
</tr>
<tr id="tr1">
<td><span>Test</span></td>
<td><span>Test1</span></td>
<td><span>Test2</span></td></tr>
<tr>
<td><span>Test</span></td>
<td><span>Test1</span></td>
<td><span>Test2</span></td>
</tr>
</table>


Писал на вскидку, не проверял. Теперь в коде не создаётся элемент, а предпологается что первый элемент в ячейке это контейнер, так что не забудь span'ы.
ava
Vidocq | 03.02.2005, 15:56 #
Sardar
Кууульноо!
Сколько плюсов я тебе УЖЕ должен? ;-)

И последнее: как сделать, чтоб любой столбец мог так себя вести?
Я думаю надо перебрать в цикле все индексы, так?
ava
Sardar | 03.02.2005, 18:06 #
Надо во всех столбцах обернуть содержимое в span, между тегами <td> и <span> не должно быть ничего, даже пробелов, иначе мозилла проглючит.
Если за место строки:
dv=tb.rows[i].cells[index].firstChild;
//поставить это
dv=(tb.rows[i].cells[index].childNodes[0].nodeType!=1)? dv=tb.rows[i].cells[index].childNodes[1]: dv=tb.rows[i].cells[index].childNodes[0];

То мозилла глючить не будет, но сам не люблю подобные патчи, уж лучше пусть народ мозиллу правит либо пробелы между тегами не ставит :)

После юзая функции можно обрезать любую колонку таблицы.
ava
Vidocq | 03.02.2005, 18:25 #
Sardar
а вот так чего не работает:


<table width=100 border = 1 id = "t1" onmouseon="resizeColumn('t1', 1, 30)" onmouseover="restoreColumn('t1', 1)">
<tr id="tr1">
<td width><span>Test</span></td>
<td><span>Test1Test1Test1Test1Test1Test1</span></td>
<td><span>Test2</span></td>
</tr>
<tr id="tr1">
<td><span>Test</span></td>
<td><span>Test1</span></td>
<td><span>Test2</span></td></tr>
<tr>
<td><span>Test</span></td>
<td><span>Test1</span></td>
<td><span>Test2</span></td>
</tr>
</table>
ava
Vidocq | 03.02.2005, 18:43 #
Sardar
в том смысле, что если таких колонок будет 2 и больше, то мне надо чтоб они одновременно срезались/восстанавливались.....
ava
Sardar | 04.02.2005, 00:23 #
Vidocq ты попросил пример, я дал его, если совсем не разбираешся в JS, то не надо ходить вокруг да около, говори сразу что нужно ;-)
Мой код изменяет одну колонку за раз, очевидно если колонок много, то нужно сделать столько же вызовов:
function resizeColumns(id, width, cols) {
for(var i=0; i<cols.length; i++) resizeColumn(id, cols[i], width);
}
function restoreColumns(id, cols) {
for(var i=0; i<cols.length; i++) restoreColumn(id, cols[i]);
}

HTML
<table width=100 border = 1 id = "t1" onmouseon="resizeColumns('t1', [1,2], 30)" onmouseover="restoreColumns('t1', [1,2])">
<tr>
<td width><div>Test</div></td>
<td><div>Test1Test1Test1Test1Test1Test1</span></td>
<td><div>Test2</span></td>
</tr>
<tr>
<td><div>Test</div></td>
<td><div>Test1</div></td>
<td><div>Test2</div></td></tr>
<tr>
<td><div>Test</div></td>
<td><div>Test1</div></td>
<td><div>Test2</div></td>
</tr>
</table>


Я ранее немного сглупил, сказав оборачивать содержимое ячеей в span'ы. У тебя в ячейкам может быть что угодно, не только текст, но например и слои. Поэтому оборачивай в DIV'ы.
ava
Vidocq | 04.02.2005, 12:14 #
Sardar
Спасибо за потраченное на меня время.
Надеюсь, я не сильно тебя утомил своими немного невразумительными просьбами, но я не понимаю, какой окончательный вид должна иметь функция...

я пишу

function resizeColumn(id, width, cols)
{
var tb=document.getElementById(id), dv;
for(var i=0; i<cols.length; i++)
{

dv=tb.rows[i].cells[i].lastChild//firstChild; //first element in cell
dv.style.position="relative";
dv.style.overflow="hidden";
dv.style.width=width+"px";
resizeColumn(id, width, cols[i]);
}

}

function restoreColumn(id, cols)
{
var tb=document.getElementById(id), dv;
for(var i=0; i<cols.length; i++)
{

dv=tb.rows[i].cells[i].lastChild//.firstChild; //first element in cell
dv.style.position="static";
dv.style.overflow="visible";
dv.style.width="auto";
restoreColumn(id, cols[i]);
}
}



<table width=100 border = 1 id = "t1" >
<tr>
<td width><div>Test</div></td>
<td><div>Test1Test1Test1Test1Test1Test1</span></td>
<td><div>Test2</div></td>
</tr>
<tr>
<td><div>Test</div></td>
<td><div>Test1</div></td>
<td><div>Test2</div></td></tr>
<tr>
<td><div>Test</div></td>
<td><div>Test1</div></td>
<td><div>Test2</div></td>
</tr>
</table>

new size
<input id = "inWidth">
<input type = "button" onclick="resizeColumn('t1', document.getElementById('inWidth').value, [0,1,2])" value = "apply">

old size
<input type = "button" onclick="restoreColumn('t1', [0,1,2])" value = "restore">


но код не работает. Вернее, работает, но не так, как мне надо... Что неправильно
ava
Sardar | 04.02.2005, 14:39 #
Мдям, функции рекурсивно вызывают сами себя, читай свой код внимательно ;-)
function resizeColumns(id, width, cols) { //множественное Columns
var tb=document.getElementById(id), dv;
for(var i=0; i<cols.length; i++) {
dv=tb.rows[i].cells[i].firstChild; //first element in cell
dv.style.position="relative";
dv.style.overflow="hidden";
dv.style.width=width+"px";
}
}

function restoreColumn(id, cols) {
var tb=document.getElementById(id), dv;
for(var i=0; i<cols.length; i++) {
dv=tb.rows[i].cells[i].firstChild; //first element in cell
dv.style.position="static";
dv.style.overflow="visible";
dv.style.width="auto";
}
}


JS это не тяп-ляп, читай что ты пишешь, исполняй в уме, кучу ошибок предотвратишь ;-)
ava
Vidocq | 04.02.2005, 17:09 #
Sardar
так не работает smile
ava
Sardar | 05.02.2005, 02:52 #
Покажи код вёрстки, как ты эти функции вызываешь. Вообще пробуй анализировать как что работает, либо поясняй что за ошибка. "Так не работает" - на такое либо телепаты либо парни из "саппорта" ответить могут, я не отношусь ни к первым, ни ко вторым ;-)
ava
Vidocq | 07.02.2005, 10:49 #
Sardar
"Вспылил, был неправ" (с) smile



function restoreColumn(id, cols)
{
var tb=document.getElementById(id), dv;
//if(tb.rows[0].cells.length<=i) return;
for(var i=0; i<cols.length; i++)
{
dv=tb.rows[i].cells[i].lastChild//.firstChild; //first element in cell
dv.style.position="static";
dv.style.overflow="visible";
dv.style.width="auto";
//restoreColumn(id, cols[i]);
}
}


function resizeColumn(id, width, cols)
{
var tb=document.getElementById(id), dv;
for(var i=0; i<cols.length; i++)
{
dv=tb.rows[i].cells[i].lastChild//firstChild; //first element in cell
dv.style.position="relative";
dv.style.overflow="hidden";
dv.style.width=width+"px";
//resizeColumn(id, width, cols[i]);
}
}




<table width=100 border = 1 id = "t1" >
<tr>
<td width><div>Test</div></td>
<td><div>Test1Test1Test1Test1Test1Test1</span></td>
<td><div>Test2</div></td>
</tr>
<tr>
<td><div>Test</div></td>
<td><div>Test1</div></td>
<td><div>Test2</div></td></tr>
<tr>
<td><div>Test</div></td>
<td><div>Test1</div></td>
<td><div>Test2</div></td>
</tr>
</table>

new size
<input id = "inWidth">
<input type = "button" onclick="resizeColumn('t1', document.getElementById('inWidth').value, [0,1,2])" value = "apply">

old size
<input type = "button" onclick="restoreColumn('t1', [0,1,2])" value = "restore">
ava
Sardar | 07.02.2005, 22:29 #
Вот этот код работает, он очень простой, но лучше не модиффицируй его, если не понимаешь что к чему. Спрашивай что не понимаешь, желательно в другом топике, ибо этот слишком разросся.
HTML
<script language="Javascript" type="text/javascript">
<!--
function resizeColumns(id, width, cols) {
for(var i=0; i<cols.length; i++) resizeColumn(id, cols[i], width);
}
function restoreColumns(id, cols) {
for(var i=0; i<cols.length; i++) restoreColumn(id, cols[i]);
}
function resizeColumn(id, index, width) {
var tb=document.getElementById(id), dv;
if(tb.rows[0].cells.length<=index) return;
for(var i=0; i<tb.rows.length; i++) {
dv=tb.rows[i].cells[index].firstChild; //ïåðâûé ýëåìåíò â ÿ÷åéêå
dv.style.position="relative";
dv.style.overflow="hidden";
dv.style.width=width+"px";
}
}
function restoreColumn(id, index) {
var tb=document.getElementById(id), dv;
if(tb.rows[0].cells.length<=index) return;
for(var i=0; i<tb.rows.length; i++) {
dv=tb.rows[i].cells[index].firstChild; //ïåðâûé ýëåìåíò â ÿ÷åéêå
dv.style.position="static";
dv.style.overflow="visible";
dv.style.width="auto";
}
}
//-->
</script>

<table width=100 border = 1 id = "t1" >
<tr>
<td><div>Test</div></td>
<td><div>Test1Test1Test1Test1Test1Test1</span></td>
<td><div>Test2</div></td>
</tr>
<tr>
<td><div>Test</div></td>
<td><div>Test1</div></td>
<td><div>Test2</div></td></tr>
<tr>
<td><div>Test</div></td>
<td><div>Test1</div></td>
<td><div>Test2</div></td>
</tr>
</table>

new size
<input id = "inWidth">
<input type = "button" onclick="resizeColumns('t1', document.getElementById('inWidth').value, [0,1,2])" value = "apply">

old size
<input type = "button" onclick="restoreColumns('t1', [0,1,2])" value = "restore">


Когда будешь переписывать смотри на число(множественное и т.д. например Columns) ;-)
Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
advanced
Absenden