Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / постороитель заголовков таблицы / 14 сообщений из 14, страница 1 из 1
04.04.2013, 15:06
    #38212991
qwerty2012
qwerty2012
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
постороитель заголовков таблицы
постороитель заголовков таблицы
можно добавить колонку(thead th)
и вот не могу придумать как сделать обьединение колонок под одним текстом примерно так
и динамично.
----------------------------------
merge1 | |
-------------- |
merge2| | 4 |
-------- 3 | |
1 | 2 | | |
-----------------------------------
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.04.2013, 15:07
    #38212995
qwerty2012
qwerty2012
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
постороитель заголовков таблицы
в пред просмотре по другому выглядело
там вообще несколько уровней совместно с колонками без уровней
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.04.2013, 15:15
    #38213014
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
постороитель заголовков таблицы
http://htmlbook.ru/html/th/rowspan
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.04.2013, 15:44
    #38213095
qwerty2012
qwerty2012
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
постороитель заголовков таблицы
да я в курсе роуспан и колспан
как их раскидать динамический
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.04.2013, 15:45
    #38213100
qwerty2012
qwerty2012
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
постороитель заголовков таблицы
допустим я создал колонку 1 2 3
потом решил обьединить 1 и 2
потом решил сверху еще обьеденить 1 2 3
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.04.2013, 15:49
    #38213109
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
постороитель заголовков таблицы
qwerty2012потом решил обьединить 1 и 2средствами JS ?
ну задайте первой ячейке rowspan посредством http://api.jquery.com/attr/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.04.2013, 16:04
    #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:07
    #38213157
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
постороитель заголовков таблицы
qwerty2012 объедени сначала
1 2
потом
1 2 3второй шаг невозможен, потому что на этом этапе 2 уже не существует (поглощено единицей)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.04.2013, 16:13
    #38213174
qwerty2012
qwerty2012
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
постороитель заголовков таблицы
щас нарисую что я имел ввиду
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.04.2013, 16:21
    #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
| Ответить | Цитировать | Написать  
09.04.2013, 07:34
    #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:50
    #38218114
qwerty2012
qwerty2012
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
постороитель заголовков таблицы
криво все работает(
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.04.2013, 10:41
    #38218324
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
постороитель заголовков таблицы
хм... не вижу реализацию шага 2.4
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.04.2013, 15:15
    #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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / постороитель заголовков таблицы / 14 сообщений из 14, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 470ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448466]:
 0ms
get settings:
 6ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 180ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 40ms
get tp. blocked users:
 1ms
others: 209ms
total:  470ms
x
x
Закрыть


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