ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / постороитель заголовков таблицы
14 сообщений из 14, страница 1 из 1
постороитель заголовков таблицы
    #38212991
qwerty2012
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
qwerty2012
Гость
постороитель заголовков таблицы
можно добавить колонку(thead th)
и вот не могу придумать как сделать обьединение колонок под одним текстом примерно так
и динамично.
----------------------------------
merge1 | |
-------------- |
merge2| | 4 |
-------- 3 | |
1 | 2 | | |
-----------------------------------
...
Рейтинг: 0 / 0
04.04.2013, 15:06
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38212995
qwerty2012
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
qwerty2012
Гость
в пред просмотре по другому выглядело
там вообще несколько уровней совместно с колонками без уровней
...
Рейтинг: 0 / 0
04.04.2013, 15:07
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38213014
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
http://htmlbook.ru/html/th/rowspan
...
Рейтинг: 0 / 0
04.04.2013, 15:15
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38213095
qwerty2012
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
qwerty2012
Гость
да я в курсе роуспан и колспан
как их раскидать динамический
...
Рейтинг: 0 / 0
04.04.2013, 15:44
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38213100
qwerty2012
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
qwerty2012
Гость
допустим я создал колонку 1 2 3
потом решил обьединить 1 и 2
потом решил сверху еще обьеденить 1 2 3
...
Рейтинг: 0 / 0
04.04.2013, 15:45
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38213109
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
qwerty2012потом решил обьединить 1 и 2средствами JS ?
ну задайте первой ячейке rowspan посредством http://api.jquery.com/attr/
...
Рейтинг: 0 / 0
04.04.2013, 15:49
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38213148
qwerty2012
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
qwerty2012
Гость
балин если все так просто было бы
вот попробуй
сначала

создай
0 1 2 3 4 5 6 колонок
объедени сначала
1 2
потом
1 2 3

потом 4 5

и у 0 6 роуспан проставь соответсвующий
...
Рейтинг: 0 / 0
04.04.2013, 16:04
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38213157
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
qwerty2012 объедени сначала
1 2
потом
1 2 3второй шаг невозможен, потому что на этом этапе 2 уже не существует (поглощено единицей)
...
Рейтинг: 0 / 0
04.04.2013, 16:07
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38213174
qwerty2012
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
qwerty2012
Гость
щас нарисую что я имел ввиду
...
Рейтинг: 0 / 0
04.04.2013, 16:13
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38213195
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
на втором шаге:
2.1 создаем новый tr
2.2 в нем создаем новый th и ему присваиваем colspan=2 (сумма colspan-ов тех кто под ним)
2.3 всем th, кто после 2-го, увеличиваем rowspan на единицу
2.4 все th, кто после 2-го, переносим в этот новый tr

на третьем шаге
3.1 создаем новый tr
3.2 в нем создаем новый th и ему присваиваем colspan=3 (сумма colspan-ов тех кто под ним)
3.3 th после 3-го нету, ничего не делаем
3.4 th после 3-го нету, ничего не делаем

на jQuery любой из этих пунктов легко реализовывается
...
Рейтинг: 0 / 0
04.04.2013, 16:21
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38218108
qwerty2012
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
qwerty2012
Гость
Паганель,
Вот моя реализация сырая пока
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
        <script type="text/javascript" src="resources/js/jquery-1.7.1.js"></script> 

        <script type="text/javascript">                        
            jQuery().ready(function () { 
                var i=0,m;       
                var reportHead={len:0},mergeTitle = {len:0};
                
                addMetaCol = function(){
                    var coltext = jQuery('#columnName').val(),
                    index=reportHead.len++;
                    reportHead[index]={id:index,text:coltext,rs:1,merge:[],isChild:false,pcnt:0};
                    return reportHead[index];
                };    
                
                jQuery("#addColumn").click(function (){
                    addMetaCol();
                    addHtmlHead()
                }); 
                
                jQuery("#mergeCol").click(function (){
                    var sCol=jQuery('#fromCol').val(),
                    mText=jQuery('#mergeColText').val(),                        
                    nCol=jQuery('#toCol').val();
                    reportHead[sCol].merge[nCol]=mText;
                    for(i=(parseInt(sCol,10)+1);i<=parseInt(nCol,10);i++){
                        reportHead[i].pcnt++;
                        reportHead[i].isChild=true;                      
                    }  
                    addHtmlHead();
                }); 
                
                addHtmlHead = function(){
                    var th,headhtml=[],level=0, rowspan ;
                    for (i = 0; i < reportHead.len;i++) {
                        th = reportHead[i];                            
                        var mlen = th.merge.length;
                        level = 0;
                        if (!th.isChild){
                            for(m=mlen;m>1;m--){
                                if (th.merge[m]!=undefined){                                                                                        
                                    if (headhtml[level] == undefined){headhtml[level]='<tr>';}
                                    headhtml[level]+='<th colspan="'+m+'">'+th.merge[m]+'</th>';
                                    level++;
                                }
                            }
                            if (headhtml[level] == undefined) {headhtml[level]='<tr>';}
                            rowspan=level > 0 ?'':'rowspan="20"';
                            headhtml[level]+='<th '+rowspan+'>'+th.text+'</th>';
                        } else{
                            rowspan= headhtml.length == (th.pcnt+1)? '':'rowspan="20"';
                            headhtml[th.pcnt]+='<th '+rowspan+'>'+th.text+'</th>';
                        }
                    } 
                    jQuery("#mytable > thead").empty();
                    for (i = 0; i < headhtml.length;i++) {
                        jQuery("#mytable>thead").append(headhtml[i]);     
                    }  
                }                              

            });                 
        </script>
    </head>
    <body>
        <table id="gridspace">
            <tbody>
                <tr>
                    <td style="border: 1px solid"> 
                        <label>Текст колонки</label>
                        <input type="text" id="columnName" value="" /> <p/>
                        <button id="addColumn">Добавить колонку</button>  
                    </td>
                    <td rowspan="2">
                        <table border="1" id="mytable" style="min-width: 600px;min-height: 300px;">
                            <thead>
                                <tr id="0" class="columns">

                                </tr>
                            </thead>            
                            <tbody>
                                <tr>

                                </tr>

                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td style="border: 1px solid"> 
                        <table>
                            <tr>
                                <td><label>Обьединить начиная с</label></td>
                                <td><input type="text" id="fromCol" value="" /></td>
                            </tr>
                            <tr>
                                <td><label>Количество колонок</label></td>
                                <td><input type="text" id="toCol" value="" /> 
                                </td>
                            </tr>
                            <tr>
                                <td><label>Текст обьединения</label>
                                </td>
                                <td> <input type="text" id="mergeColText" value="" /></td></tr>
                            <tr>
                                <td><button id="mergeCol">Обьединить</button></td>
                            </tr>  
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
...
Рейтинг: 0 / 0
09.04.2013, 07:34
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38218114
qwerty2012
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
qwerty2012
Гость
криво все работает(
...
Рейтинг: 0 / 0
09.04.2013, 07:50
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38218324
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
хм... не вижу реализацию шага 2.4
...
Рейтинг: 0 / 0
09.04.2013, 10:41
| Ответить | Цитировать | Написать  
постороитель заголовков таблицы
    #38218930
qwerty2012
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
qwerty2012
Гость
сейчас вроде строит более вменяемо
алгоритм свой собственный
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      
        <script type="text/javascript" src="resources/js/jquery-1.7.1.js"></script>                
 

        <script type="text/javascript">                        
            jQuery().ready(function () { 
                var i=0,m;       
                var reportHead={len:0},mergeTitle = {len:0};
                
                addMetaCol = function(){
                    var coltext = jQuery('#columnName').val(),
                    index=reportHead.len++;
                    reportHead[index]={id:index,text:coltext,rs:1,merge:[],isChild:false,pcnt:0};
                    return reportHead[index];
                };    
                
                jQuery("#addColumn").click(function (){
                    addMetaCol();
                    addHtmlHead()
                }); 
                
                jQuery("#mergeCol").click(function (){
                    var sCol=jQuery('#fromCol').val(),
                    mText=jQuery('#mergeColText').val(),                        
                    nCol=jQuery('#toCol').val();
                    if (reportHead[sCol].merge[nCol] == undefined){
                        for(i=(parseInt(sCol,10)+1);i<(parseInt(sCol,10)+parseInt(nCol,10));i++){
                            //                            if (reportHead[i].merge == undefined) 
                            {
                                reportHead[i].pcnt++;                            
                                reportHead[i].isChild=true;            
                            }
                        } 
                    } 
                    reportHead[sCol].merge[nCol]=mText;                    
                    addHtmlHead();
                }); 
                
                addHtmlHead = function(){
                    var th,headhtml=[],level=0, rowspan ;
                    for (i = 0; i < reportHead.len;i++) {
                        th = reportHead[i];                            
                        var mlen = th.merge.length;
                        level = th.pcnt;
                        for(m=mlen;m>1;m--){
                            if (th.merge[m]!=undefined){                                                                                        
                                if (headhtml[level] == undefined){headhtml[level]='<tr>';}
                                headhtml[level]+='<th colspan="'+m+'">'+th.merge[m]+'</th>';                                   
                                level++;
                            }
                        }
                        if (headhtml[level] == undefined) {headhtml[level]='<tr>';}
                        headhtml[level]+='<th rowspan >'+th.text+'</th>';
                    } 
                    jQuery("#mytable > thead").empty();
                    for (i = 0; i < headhtml.length;i++) {
                        var tr =(i+1!=headhtml.length)? headhtml[i].replace(/rowspan/g,'rowspan="20"'):headhtml[i].replace(/rowspan/g,'');
                        jQuery("#mytable>thead").append(tr+"</tr>");     
                    }  
                }                              

            });                 
        </script>
    </head>
    <body>
        <table id="gridspace">
            <tbody>
                <tr>
                    <td style="border: 1px solid"> 
                        <label>Текст колонки</label>
                        <input type="text" id="columnName" value="" /> <p/>
                        <button id="addColumn">Добавить колонку</button>  
                    </td>
                    <td rowspan="2">
                        <table border="1" id="mytable" style="min-width: 600px;min-height: 300px;">
                            <thead>
                            </thead>            
                            <tbody>
                                <tr>

                                </tr>

                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td style="border: 1px solid"> 
                        <table>
                            <tr>
                                <td><label>Обьединить начиная с</label></td>
                                <td><input type="text" id="fromCol" value="" /></td>
                            </tr>
                            <tr>
                                <td><label>Количество колонок</label></td>
                                <td><input type="text" id="toCol" value="" /> 
                                </td>
                            </tr>
                            <tr>
                                <td><label>Текст обьединения</label>
                                </td>
                                <td> <input type="text" id="mergeColText" value="" /></td></tr>
                            <tr>
                                <td><button id="mergeCol">Обьединить</button></td>
                            </tr>  
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
...
Рейтинг: 0 / 0
09.04.2013, 15:15
| Ответить | Цитировать | Написать  
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / постороитель заголовков таблицы
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38218108&tid=1448466]:
 0ms
get settings:
 9ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 167ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 53ms
get tp. blocked users:
 1ms
others: 213ms
total:  479ms
созд. / загр.: 479ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]