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

Тогда перепишем пример:

Код

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'ы.

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

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

Надо во всех столбцах обернуть содержимое в 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];

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

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

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>

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

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'ы.

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

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

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

Код

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

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

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

Sardar
"Вспылил, был неправ" (с)

Код

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

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

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)