Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Изменение ширины таблицы джаваскриптом

Автор: Vidocq 15.12.2004, 11:45

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

Автор: Се ля ви 15.12.2004, 12:46

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

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

Автор: 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;//вот здесь чего-то ошибка  :(  
  }  	
}

Автор: Alx 15.12.2004, 14:25

Vidocq
hidden в кавычки smile

Автор: Vidocq 15.12.2004, 14:32

да, ещё вопрос: где можно найти какую-нить литературу по 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

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

table.style.overflow ="hidden";

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

Автор: Vidocq 15.12.2004, 16:18

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

Автор: Sardar 15.12.2004, 23:53

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

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

Автор: Vidocq 16.12.2004, 13:27

2 Sardar

Цитата

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

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

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

smile

Автор: 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>

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

.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

И откуда ты такие старые элементы достаешь, хотя для ИЕ должно быть по барабану...
А забыл ты для слоя позицию прописать, она либо абсолютной либо релативной должна быть, по другому не катит 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

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

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

Автор: Vidocq 2.2.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()

Или нет?

Автор: Sardar 3.2.2005, 00:16

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

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

Автор: Vidocq 3.2.2005, 12:52

Sardar
Уменьшение ширины работает. Но после того, как я восстановляю ширину - пропадает (обрезается) текст внутри ячейки...
Как сделать, чтоб он там оставался после восстановления ширины?

Автор: Sardar 3.2.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

Писал на вскидку, не проверял. Теперь в коде не создаётся элемент, а предпологается что первый элемент в ячейке это контейнер, так что не забудь span'ы.

Автор: Vidocq 3.2.2005, 15:56

Sardar
Кууульноо!
Сколько плюсов я тебе УЖЕ должен? smile

И последнее: как сделать, чтоб любой столбец мог так себя вести?
Я думаю надо перебрать в цикле все индексы, так?

Автор: Sardar 3.2.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];

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

После юзая функции можно обрезать любую колонку таблицы.

Автор: Vidocq 3.2.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>

Автор: Vidocq 3.2.2005, 18:43

Sardar
в том смысле, что если таких колонок будет 2 и больше, то мне надо чтоб они одновременно срезались/восстанавливались.....

Автор: Sardar 4.2.2005, 00:23

Vidocq ты попросил пример, я дал его, если совсем не разбираешся в JS, то не надо ходить вокруг да около, говори сразу что нужно smile

Мой код изменяет одну колонку за раз, очевидно если колонок много, то нужно сделать столько же вызовов:

Код

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

Я ранее немного сглупил, сказав оборачивать содержимое ячеей в span'ы. У тебя в ячейкам может быть что угодно, не только текст, но например и слои. Поэтому оборачивай в DIV'ы.

Автор: Vidocq 4.2.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">

но код не работает. Вернее, работает, но не так, как мне надо... Что неправильно

Автор: Sardar 4.2.2005, 14:39

Мдям, функции рекурсивно вызывают сами себя, читай свой код внимательно smile

Код

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 это не тяп-ляп, читай что ты пишешь, исполняй в уме, кучу ошибок предотвратишь smile

Автор: Vidocq 4.2.2005, 17:09

Sardar
так не работает smile

Автор: Sardar 5.2.2005, 02:52

Покажи код вёрстки, как ты эти функции вызываешь. Вообще пробуй анализировать как что работает, либо поясняй что за ошибка. "Так не работает" - на такое либо телепаты либо парни из "саппорта" ответить могут, я не отношусь ни к первым, ни ко вторым smile

Автор: Vidocq 7.2.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">

Автор: Sardar 7.2.2005, 22:29

Вот этот код работает, он очень простой, но лучше не модиффицируй его, если не понимаешь что к чему. Спрашивай что не понимаешь, желательно в другом топике, ибо этот слишком разросся.

HTML

Когда будешь переписывать смотри на число(множественное и т.д. например Columns) smile