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

Vidocq

Дата 15.12.2004, 11:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 431
Регистрация: 15.12.2004
Где: Запорожье, Украин а

Репутация: нет
Всего: 7

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

Это сообщение отредактировал(а) Vidocq - 15.12.2004, 11:48

--------------------

Всё течёт ©

Се ля ви

Дата 15.12.2004, 12:46 (ссылка)

(нет голосов)

Загрузка ...

Java/SOAрхитектор

Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127

В CSS есть два свойства - overflow и clip. Первое определяет способ отображения содержимого блока, когда оно не влазит в его размеры. По-умолчанию оно установлено в visible, что означает, что блок расширяется и показывает всё, что в нём есть. Можно поставить hidden (не влазящие данные будут отсекааться) или scroll (появятся полосы прокрутки для внутренней области блока).
Свойство clip определяет смещение области отсечения относительно рамеров блока. По-умолчаанию они совпадают с размерами блока, но можно указать rect(top, right, bottom, left) - и область отсечения будет отступать от внутренних границ блока со всех сторон на указанные значения.

Вобщем, в простейшем варианте, указываешь жестко размер ячейки и прописываешь для неё overflow: hidden; Для болеее сложных вещей - играйся с этими параметрами smile

--------------------

)
(
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...

Vidocq

Дата 15.12.2004, 13:43 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 431
Регистрация: 15.12.2004
Где: Запорожье, Украин а

Репутация: нет
Всего: 7

к Се Ля Ви
А как получить к этому overflow доступ из скрипта?

Код

function resize(tableId, width) {    
var table = document.getElementById(tableId);    
if(table) 
{    	
table.style.width = width;
table.style.overflow =hidden;//вот здесь чего-то ошибка  :(  
  }  	
}

Это сообщение отредактировал(а) Sardar - 15.12.2004, 23:38

--------------------

Всё течёт ©

Alx

Дата 15.12.2004, 14:25 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

Vidocq
hidden в кавычки smile

--------------------

Vidocq

Дата 15.12.2004, 14:32 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 431
Регистрация: 15.12.2004
Где: Запорожье, Украин а

Репутация: нет
Всего: 7

да, ещё вопрос: где можно найти какую-нить литературу по css?
Добавлено @ 14:36
2 ALEXANDRO
поставил кавыки,
всё равно не рулит smile

Код


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

--------------------

Всё течёт ©

Vidocq

Дата 15.12.2004, 14:51 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 431
Регистрация: 15.12.2004
Где: Запорожье, Украин а

Репутация: нет
Всего: 7

это канеша бред, так как сначала должно идти

table.style.overflow ="hidden";

а уже потом
table.style.width = width;
....
И всё равно не работает smile

--------------------

Всё течёт ©

Vidocq

Дата 15.12.2004, 16:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 431
Регистрация: 15.12.2004
Где: Запорожье, Украин а

Репутация: нет
Всего: 7

Блин, как оно ваще работает это overflow???

Sardar

Дата 15.12.2004, 23:53 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Vidocq на счёт документации смотри в закреплённом топике "хорошая документация", особенно интересно здесь: http://wdh.suncloud.ru/

Твоя проблема решается помещением таблицы в слой и для него задай style.overflow="hidden". Задача странная, может проще скрыть некоторые колонки, а при полном просмотре показать их все?

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Vidocq

Дата 16.12.2004, 13:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 431
Регистрация: 15.12.2004
Где: Запорожье, Украин а

Репутация: нет
Всего: 7

2 Sardar

Цитата

Задача странная, может проще скрыть некоторые колонки, а при полном просмотре показать их все?

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

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

smile

Vidocq

Дата 16.12.2004, 14:29 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 431
Регистрация: 15.12.2004
Где: Запорожье, Украин а

Репутация: нет
Всего: 7

не знаю но вот эта дрянь не работает:

Код


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

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

.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;}

--------------------

Всё течёт ©

Sardar

Дата 16.12.2004, 16:37 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

И откуда ты такие старые элементы достаешь, хотя для ИЕ должно быть по барабану...
А забыл ты для слоя позицию прописать, она либо абсолютной либо релативной должна быть, по другому не катит smile

Код

<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 криво назвал. Поправь перед запуском.

--------------------

Vidocq

Дата 1.2.2005, 11:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 431
Регистрация: 15.12.2004
Где: Запорожье, Украин а

Репутация: нет
Всего: 7

Sardar
Класс!!! ТО, что надо! ]()

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

Типа:

Код


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

--------------------

Всё течёт ©

Sardar

Дата 2.2.2005, 03:05 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Нет, так не пройдёт, нужно оборачивать содержимое каждой ячейки в столбце в слой, либо задавать "position: relative; overflow: hidden;" + размеры для самих ячеек, что более правильно.

--------------------

Vidocq

Дата 2.2.2005, 13:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 431
Регистрация: 15.12.2004
Где: Запорожье, Украин а

Репутация: нет
Всего: 7

Sardar
то есть для каждой td

Код


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

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

Или нет?

--------------------

Всё течёт ©

Sardar

Дата 3.2.2005, 00:16 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Не совем, нужно как я сказал выше перебирать все ячейки в колонке, оборачивать содержимое в слой, который и будет обрезать содержимое. Вот пример:

HTML

Код

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);

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »