Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Table cols resizable 
:(
    Опции темы
Tony
  Дата 15.8.2006, 00:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12



Расширение колонок у таблицы. Как реализовать?
Типа такого table

Это сообщение отредактировал(а) Tony - 15.8.2006, 11:21


--------------------
user posted image
user posted image
PM MAIL Skype   Вверх
12345c
Дата 15.8.2006, 14:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Добавление колонок?
PM WWW   Вверх
Tony
Дата 15.8.2006, 23:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12



Нет. Делать колнкам resize(изменение размера).Посмотри ссилку.Там можно растягивать или сужать колонку.Sorry, ne tu ssilku dal smile tablica

Это сообщение отредактировал(а) Tony - 15.8.2006, 23:57


--------------------
user posted image
user posted image
PM MAIL Skype   Вверх
12345c
Дата 16.8.2006, 00:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Менять размеры ячеек легко - .offsetWidth верхней ячейки таблицы. Но чтобы так сделать - это как в анекдоте "...это уж пусть ваши инженеры решают".

Вообще, достаточно просто - скрестить этот скрипт с таблицей. http://js2.ru/example/JsPrimeryCode-56.htm

Это сообщение отредактировал(а) 12345c - 3.3.2008, 14:34


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
Tony
Дата 16.8.2006, 00:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12



перед таблицей ,я писал скрипт на движение обэктов, я не знаю как это применить таблице. smile .Таблица это не див smile

Это сообщение отредактировал(а) Tony - 16.8.2006, 00:41


--------------------
user posted image
user posted image
PM MAIL Skype   Вверх
12345c
Дата 16.8.2006, 14:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Вместо дива берите небольшой прозрачный рисунок в конце ячейки (или рисунок границы), на фоне которого стилем создаётся указатель "Вправо-влево". Двигайте не рисунок (он сам будет), а границу таблицы за счёт уменьшения родительской ячейки и увеличения следующей. Вертикальную координату игнорируйте.
PM WWW   Вверх
pythonwin
Дата 22.8.2006, 15:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36



Tony, что получилось?
PM WWW GTalk Jabber   Вверх
Tony
Дата 22.8.2006, 16:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12



Пока нет.Ближайшее время налабаю.Если код будет маленький я вставлю его в DataGrid и выпущу версию 1.4


--------------------
user posted image
user posted image
PM MAIL Skype   Вверх
pythonwin
Дата 23.8.2006, 07:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36



Цитата(Tony @  22.8.2006,  23:31 Найти цитируемый пост)
Пока нет.Ближайшее время налабаю.Если код будет маленький я вставлю его в DataGrid и выпущу версию 1.4 

Хорошо! Буду ждать. smile
PM WWW GTalk Jabber   Вверх
JSman
Дата 25.8.2006, 01:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 279
Регистрация: 10.7.2006

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



если вставить таблицу в див с атрибутом CONTENTEDITABLE, получишь все что хотел, но IE
PM ICQ   Вверх
Tony
Дата 26.8.2006, 10:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12



Цитата(JSman @ 25.8.2006,  01:10)
если вставить таблицу в див с атрибутом CONTENTEDITABLE, получишь все что хотел, но IE

Нет нелзя так. Ты зможешь толко редактировать общую длинну таблицы ,но не колонки по отделности.Да и вообще ты тогда сможешь изменать название колонок.

Добавлено @ 10:12 
да и вообще не CONTENTEDITABLE ,а CONTENTEDITABLE="true"

Добавлено @ 10:23 
Написал пример для одной колонки(можно и для всех).Проблема в том 4то если                    
                           <!-- <colgroup>
                                <col width="25%"/><col width="25%"/><col width="25%"/><col width="25%"/> 
                            </colgroup>
                            -->
разкоментировать ,то тогда разботать не может.Даже если удаляешь Node <colgroup> iz elemnta table.
Код

<html>
<head>
<title>Table test</title>
    <script type="text/javascript">
            var row;
            var cell_td;
            var obj=null;
            var sel=false;
            function startMouseMove(e){
                e=window.event||e;
                cell_td.width=e.clientX-8+"px";
                obj.style.width=15+"px";
            }
            
            function mouseClick(o){    
                    cell_td=o.parentNode.parentNode.parentNode.parentNode;
                    row=cell_td.parentNode;
                    obj=o;
                   // alert(row.parentNode.parentNode.style.width);
                   //alert("-");
                    t=document.getElementById("killer");
                    gro=t.getElementsByTagName("COLGROUP");
                    if (gro[0]!=null){
                        t.removeChild(gro[0]);
                    }
                   //alert(gro[0].nodeName)
                    
                    
                    //el=t.firstChild.childNodes;
                    //l=el.length;
 //                   alert(el[0].nodeName);
                    //for(i=0;i<l;i++){
                    //    t.firstChild.removeChild(el[i]);

                    //}
                if(sel==false){
                    row.onmousemove=startMouseMove;
                    sel=true;
                }else{
                    row.onmousemove=null;
                    obj.style.width=2+"px";
                    sel=false;
                }
               
            }

    </script>
    <style>
        .dataGrid_scrollBox{
            SCROLLBAR-FACE-COLOR: #e9e9e9; 
            SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; 
            SCROLLBAR-SHADOW-COLOR: #e9e9e9;
            SCROLLBAR-3DLIGHT-COLOR: #dbdbdb;
            SCROLLBAR-ARROW-COLOR: #787878; 
            SCROLLBAR-TRACK-COLOR: #f5f5f5; 
            SCROLLBAR-DARKSHADOW-COLOR: #aeaeae; 
            overflow:scroll;
        }
    </style>
</head>
    <body>
        <table cellpadding="0" cellpadding="0" border="0" width="100%">
            <tbody>
                <tr>
                    <td>
                        <table border="1" width="100%" cellpadding="0" cellspacing="0" id="killer">
                          <!--
                            <colgroup>
                                <col width="25%"/><col width="25%"/><col width="25%"/><col width="25%"/> 
                            </colgroup>
                            -->
                            <tbody>
                                <tr align="center" style="cursor:pointer" >
                                    <td>
                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tbody>
                                            <tr><td align="center">
                                                ãîä
                                            </td>
                                            <td width="2" style="cursor:e-resize" onclick="mouseClick(this)" bgcolor="red"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </td><td>ôàìèëèÿ</td><td>öåíà</td><td>öåíà2</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td width="14"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div style="overflow:hidden;height:130px">
                            <div style="height:146px" class="dataGrid_scrollBox">
                                <table id="dataGrid_1" border="1" width="100%" cellpadding="0" cellspacing="0">
                                    <col width="25%"/><col width="25%"/><col width="25%"/><col width="25%"/>
                                    <tbody>
                                        <tr><td>1956</td><td><a href='1'>Áèðþ÷åâ</a></td><td>1112.6</td><td>1</td></tr>
                                        <tr><td>2006</td><td>a</td><td>1.2</td><td>89</td></tr>
                                        <tr><td><a href="jhkjhkj">1998</a></td><td>a</td><td>1.9</td><td>81</td></tr>
                                        <tr><td style="background-color:yellow">1845</td><td>a</td><td>114.8</td><td>83</td></tr>
                                        <tr><td>1945</td><td><a href='2'>Òð</a></td><td>3.6</td><td>806</td></tr>
                                        <tr><td>2001</td><td>Ô</td><td>3.1</td><td>6</td></tr>
                                        <tr onclick="alert('examle:inoke ajax')"><td>1956</td><td><a href='1'>Áèðþ÷åâ</a></td><td>1112.6</td><td>1</td></tr>
                                        <tr><td>2006</td><td>a</td><td>1.2</td><td>89</td></tr>
                                        <tr><td><a href="jhkjhkj">1998</a></td><td>a</td><td>1.9</td><td>81</td></tr>
                                        <tr><td style="background-color:yellow">1845</td><td>a</td><td>114.8</td><td>83</td></tr>
                                        <tr><td>1945</td><td><a href='2'>Òð</a></td><td>3.6</td><td>806</td></tr>
                                        <tr><td>2001</td><td>Ô</td><td>3.1</td><td>6</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

    </body>
</html>



--------------------
user posted image
user posted image
PM MAIL Skype   Вверх
Tony
Дата 26.8.2006, 10:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12



если есть такой код 
Код

<table width="100%" onclick="alert(this.style.width)">
....
</table>

Возвращается width  в процентах.Можо ли полу4ить ширину не в процентах?

Добавлено @ 10:36 
нет так alert(this.width)

Добавлено @ 10:37 
а this.style.width вообще ни4его не возвращает


--------------------
user posted image
user posted image
PM MAIL Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0676 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.