VPF::сортировка столбцов в таблице

dstorm81

Дата 13.7.2006, 21:47 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

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

вот написал, может кому нить сгодится для употребления...

Код

<html>
<head>
<title>сортировка строк в таблице</title>
<script>
//    author: DStorm
//    mail:[email protected]    
//    copyrights:free for all :)

doSort=function(nSt,isChsl)
{
var outStr=outStrTD='';
var tdInTbl=document.getElementById('coolTable').getElementsByTagName('TR');
var dlnTbl=tdInTbl[0].getElementsByTagName('TD');
var nmass=new Array();
for(i=0;i<tdInTbl.length;i++){nmass[i]=tdInTbl[i].childNodes[nSt].firstChild.nodeValue}
if(isChsl){nmass=nmass.sort(doCompare)}
else{nmass=nmass.sort()}
for(k=0;k<tdInTbl.length;k++)
{
    for(i=0;i<tdInTbl.length;i++)
    {
    if(nmass[k].indexOf(tdInTbl[i].childNodes[nSt].firstChild.nodeValue)!=-1)
            {
                for(m=0;m<dlnTbl.length;m++){outStrTD+='<td>'+tdInTbl[i].childNodes[m].firstChild.nodeValue+'<\/td>'}
                outStr+='<tr>'+outStrTD+'<\/tr>';
                outStrTD='';
            }
    }
}
document.getElementById("coolTable").innerHTML='<table><tbody>'+outStr+'<\/tbody><\/table>';

}
doCompare=function(a,b){return b-a}
</script>
<style>
td{border-color:black;width:100px;border-width:1px;border-style:solid;text-align:center}
#year{background-color:red;cursor:pointer}
#family{background-color:lightblue;cursor:pointer}
#price{background-color:yellow;cursor:pointer}
span{width:100px}
</style>
</head>
<body>

<table>
<tbody>
<tr><td id="year" onclick=doSort(0,true)>год</td><td id="family" onclick=doSort(1,false)>фамилия</td><td id="price" onclick=doSort(2,true)>цена</td></tr>
</tbody>
</table>

<div id='coolTable'>
<table>
<tbody>
<tr><td>1956</td><td>Бирючев</td><td>2006.9</td><td>строка 1</td></tr>
<tr><td>2006</td><td>Астафьев</td><td>152.45</td><td>строка 2</td></tr>
<tr><td>1998</td><td>Тритонов</td><td>785.59</td><td>строка 3</td></tr>
<tr><td>1845</td><td>Шмелев</td><td>458.4</td><td>строка 4</td></tr>
<tr><td>1945</td><td>Идрисов</td><td>9565.4</td><td>строка 5</td></tr>
<tr><td>2001</td><td>Фатыхов</td><td>75.1</td><td>строка 6</td></tr>
</tbody>
</table>
</div>

</body>
</html>

tested msie6, opera 8.51, ff 1.5+

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

Sardar

Дата 14.7.2006, 11:19 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

dstorm81, выбирая вёрстку и вгоняя её назад в таблицу можно получить "потери стилей", т.к. не увсех браузеров (выделяються IE и Opera) есть хороший innerHTML, а также не все браузеры (выделяються мозилоподобные) без последствий парсят таблицу с вёрсткой по innerHTML. Для выборок всех строк лучше пользоваться коллекцией rows, передвигать лучше пользуя insertChild, нода на старом месте "исчезнет". Если нужно сохранить все разделения с tBody, то работаем не с rows, а с tBodies[index].rows.

В целом приемлемое решение smile

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

dstorm81

Дата 14.7.2006, 20:32 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

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

и тут пришел поручик Sardar smile

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

Код


<html>
<head>
<title>сортировка строк в таблице (со сцылами)</title>
<script>
//    author: DStorm
//    mail:[email protected]    
//    copyright:free for all
doSort=function(nSt,isChsl)
{
var outStr='';
var tdInTbl=document.getElementById('coolTable').getElementsByTagName('TR');
var dlnTbl=tdInTbl[0].getElementsByTagName('TD');
var nmass=new Array();
for(i=0;i<tdInTbl.length;i++)
    {
    if(tdInTbl[i].childNodes[nSt].firstChild.nodeType!=3){nmass[i]=tdInTbl[i].childNodes[nSt].firstChild.firstChild.nodeValue;}
    else{nmass[i]=tdInTbl[i].childNodes[nSt].firstChild.nodeValue;}
    }
if(isChsl){nmass=nmass.sort(doCompare)} else{nmass=nmass.sort()}
for(k=0;k<tdInTbl.length;k++)
{
    for(i=0;i<tdInTbl.length;i++)
    {
    try{if(nmass[k].indexOf(tdInTbl[i].childNodes[nSt].firstChild.firstChild.nodeValue)!=-1)outStr+='<tr>'+tdInTbl[i].innerHTML+'<\/tr>'} catch(e){}
    try{if(nmass[k].indexOf(tdInTbl[i].childNodes[nSt].firstChild.nodeValue)!=-1)outStr+='<tr>'+tdInTbl[i].innerHTML+'<\/tr>'}  catch(e){}
    }
}
document.getElementById("coolTable").innerHTML='<table><tbody>'+outStr+'<\/tbody><\/table>';
}
doCompare=function(a,b){return b-a}
</script>
<style>
td{border-color:black;width:100px;border-width:1px;border-style:solid;text-align:center}
#year{background-color:red;cursor:pointer}
#family{background-color:lightblue;cursor:pointer}
#price{background-color:yellow;cursor:pointer}
span{width:100px}
</style>
</head>
<body>

<table>
<tbody>
<tr><td id="year" onclick=doSort(0,true)>год</td><td id="family" onclick=doSort(1,false)>фамилия</td><td id="price" onclick=doSort(2,true)>цена</td></tr>
</tbody>
</table>

<div id='coolTable'>
<table>
<tbody>
<tr><td>1956</td><td><a href='1'>Бирючев</a></td><td>2006.9</td><td>строка 1</td></tr>
<tr><td>2006</td><td>Астафьев</td><td>152.45</td><td>строка 2</td></tr>
<tr><td><a href='qw'>1998</a></td><td>Тритонов</td><td>785.59</td><td>строка 3</td></tr>
<tr><td>1845</td><td>Шмелев</td><td>458.4</td><td>строка 4</td></tr>
<tr><td>1945</td><td><a href='2'>Идрисов</a></td><td>9565.4</td><td>строка 5</td></tr>
<tr><td>2001</td><td>Фатыхов</td><td>75.1</td><td>строка 6</td></tr>
</tbody>
</table>
</div>

</body>
</html>

вот переделка небольшая, видити ли им ссылки в таблицах нужны...

Это сообщение отредактировал(а) Sardar - 15.7.2006, 00:35

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

Tony

Дата 16.8.2006, 12:22 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

Ну что дружок.
1. измени 1,false на 1,true.Посмотри в IE smile

)
2. сделай 2 Тритонова в колонке 1.Что то их многовато стало после сортинга smile

Не зачёт

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

--------------------

Tony

Дата 17.8.2006, 12:08 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

Код


<html>
<head>
<title>Table test</title>
    <script type="text/javascript">
        var dsc=false;
        var selectedCol=0;
        
        function sortData(col,obj){
            /*
                created by Tjomi4
                17/08/2006
                                enjoy
            */
                selectedCol=col;
            var rowCount=document.getElementById(obj).getElementsByTagName("tr");
            var colContentArray=new Array();
        
            for(i=0;i<rowCount.length;i++)
                colContentArray[i]=rowCount[i];
            
            if(dsc){
                colContentArray=colContentArray.sort(doCompareDCS);    
                dsc=false;            
            }else{
                colContentArray=colContentArray.sort(doCompareASC);
                dsc=true;
            }
            
            elemTbody=document.createElement("tbody");
            
            for(r=0;r<colContentArray.length;r++)
                    elemTbody.appendChild(colContentArray[r]);                

            elemTable=document.getElementById(obj);
            elemTable.removeChild(elemTable.getElementsByTagName("tbody")[0]);
            elemTable.appendChild(elemTbody);
    
        }
            
        function doCompareDCS(a,b){            
            resA=getCellValue(a);
        resB=getCellValue(b);
        
            if (resA<resB) return 1;
            if (resA>resB) return -1;
            return 0;
        }
                
        function doCompareASC(a,b){
            resA=getCellValue(a);
        resB=getCellValue(b);

            if (resA<resB) return -1;
            if (resA>resB) return 1;
            return 0;
        }
        
        function getCellValue(elem){
            cellValue=elem.childNodes[selectedCol].firstChild;
            val=null;
            
        if(cellValue.nodeType!=3)
         val=cellValue.firstChild.nodeValue;                
        else
         val=cellValue.nodeValue;    

      if (!isNaN(val))    
         return Number(val);
     else
         return val;

        }
        
    </script>
    <style>
        #dataGrid tbody tr{
                background-color:#EDEDED;
        }
    </style>
</head>
    <body>
    <table cellpadding="0" cellpadding="0" border="0" width="100%">
        <tbody>
            <tr>
                <td>
                    <table border="1" width="100%" cellpadding="0" cellspacing="0">
                        <col width="20%"/><col width="20%"/><col width="20%"/><col width="20%"/>
                        <tbody>
                            <tr align="center" style="cursor:pointer">
                                <td onclick="sortData(0,'dataGrid')">год</td><td onclick="sortData(1,'dataGrid')">фамилия</td><td onclick="sortData(2,'dataGrid')">цена</td><td onclick="sortData(3,'dataGrid')">цена2</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td width="14"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div style="overflow:hidden;height:130px">
                        <div style="overflow:scroll;height:146px">
                            <table id="dataGrid" border="1" width="100%" cellpadding="0" cellspacing="0">
                                <col width="20%"/><col width="20%"/><col width="20%"/><col width="20%"/>
                                <tbody>
                                    <tr onmousemove="this.style.backgroundColor='#00BFFF';this.style.cursor='pointer'" onmouseout="this.style.backgroundColor=''" 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='5555'>1998</a></td><td>a</td><td>1.9</td><td>81</td></tr>
                                    <tr><td style="background-color:red">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>

--------------------

dstorm81

Дата 17.8.2006, 12:29 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

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

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>сортировка строк в таблице (со сцылами)</title>
<script type="text/javascript">
//<![CDATA[
/* author: DStorm
 mail:[email protected] 
 copyright:free for all //new version
пояснение по doSort(p1,p2,p3)
p1-указывает скрипту по какому столбцу проводить сортировку
p2-из-за разной обработки sort(doCompare) браузерами, явно указываем что в ячейке (можно и саму определить через isNaN)
p3-как сортировать, если значения в ячейках цифры- то true/false - по возрастанию/по убыванию
если значения слова то true/false - с конца алфавита/по алфавиту
*/
doSort=function(p1,p2,p3)
{
var outStr='';
var mZn=[];
var hndl2Div=document.getElementById("coolTable");
var hndl2Tbl=hndl2Div.getElementsByTagName("TABLE");
var hndl2TRinTbl=hndl2Tbl[0].getElementsByTagName("TR");
for(i=0;i<hndl2TRinTbl.length;i++){akr=hndl2TRinTbl[i].childNodes[p1].firstChild;if(akr.nodeValue!=null){mZn[i]=akr.nodeValue}else{mZn[i]=akr.firstChild.nodeValue}}
if(p2=='wrd'){mZn=mZn.sort()}else{mZn=mZn.sort(doCompare)}
if(p3){mZn=mZn.reverse()}
for(r=0;r<mZn.length;r++)
    {
    for(i=0;i<hndl2TRinTbl.length;i++)
        {
        akr=hndl2TRinTbl[i].childNodes[p1].firstChild;
        try{if(mZn[r]==akr.firstChild.nodeValue){outStr+="<tr>"+hndl2TRinTbl[i].innerHTML+"<\/tr>";akr.firstChild.nodeValue=''}}catch(e){}
        try{if(mZn[r]==akr.nodeValue){outStr+="<tr>"+hndl2TRinTbl[i].innerHTML+"<\/tr>";akr.nodeValue='';}}catch(e){}
        }
    }
document.getElementById("coolTable").innerHTML="<table><tbody>"+outStr+"<\/tbody><\/table>";
}
doCompare=function(a,b){return b-a}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
td{border-color:black;width:100px;border-width:1px;border-style:solid;text-align:center}
#year{background-color:red;cursor:pointer}
#family{background-color:lightblue;cursor:pointer}
#price{background-color:yellow;cursor:pointer}
span{width:100px}
/*]]>*/
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td id="year" onclick="doSort(0,'ch',true)">год</td>
<td id="family" onclick="doSort(1,'wrd',true)">фамилия</td>
<td id="price" onclick="doSort(2,'ch',false)">цена</td>
</tr>
</tbody>
</table>
<div id="coolTable">
<table>
<tr><td>1956</td><td><a href=#>Бирючев</a></td><td>2006.7</td><td>строка 1</td></tr>
<tr><td>2006</td><td>Астафьев</td><td><a href=#>152.5</a></td><td>строка 2</td></tr>
<tr><td>1998</td><td>Тритонов</td><td>785.4</td><td>строка 3</td></tr>
<tr><td>1845</td><td>Шмелев</td><td>458.6</td><td>строка 4</td></tr>
<tr><td>1945</td><td>Идрисов</td><td>9565.3</td><td>строка 5</td></tr>
<tr><td>2001</td><td>Фатыхов Ч.</td><td><a href=#>75.1</a></td><td>строка 6</td></tr>
<tr><td><a href=#>2001</a></td><td><a href=#>Фатыхов</a></td><td>75.1</td><td>строка 7</td></tr>
<tr><td><a href=#>2001</a></td><td>Фатыхов</td><td>75.1</td><td>строка которая дублирует 7</td></tr>
<tr><td><a href=#>2004</a></td><td><a href=#>Пронин</a></td><td><a href=#>70.1</a></td><td>строка 9</td></tr>
<tr><td><a href=#>2004</a></td><td><a href=#>Пронин</a></td><td><a href=#>70.1</a></td><td>строка 10</td></tr>
</table>
</div>
</body>
</html>

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

pythonwin

Дата 17.8.2006, 13:00 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

а вот такая таблица http://www.activewidgets.com/grid/
http://www.activewidgets.com/examples/2.0/basic.htm

Код


<html>
<head>
    <title>ActiveWidgets Grid :: Examples</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

    <!-- ActiveWidgets stylesheet and scripts -->
    <link href="http://www.activewidgets.com/runtime/2.0/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
    <script src="http://www.activewidgets.com/runtime/2.0/lib/aw.js"></script>

    <!-- grid format -->
    <style>
        .aw-grid-control {height: 100%; width: 100%; margin: 0px; border: none; font: menu;}
        .aw-row-selector {text-align: center}

        .aw-column-0 {width:  80px;}
        .aw-column-1 {width: 200px;}
        .aw-column-2 {text-align: right;}
        .aw-column-3 {text-align: right;}
        .aw-column-4 {text-align: right;}

        .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
    </style>

    <!-- grid data -->
    <script>
        var myData = [
            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
            ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
            ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
            ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
            ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
            ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
            ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
            ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
            ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
            ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
            ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
            ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
            ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
        ];

        var myColumns = [
            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
        ];
    </script>
</head>
<body>
    <script>

    //    create ActiveWidgets Grid javascript object
    var obj = new AW.UI.Grid;

    //    define data formats
    var str = new AW.Formats.String;
    var num = new AW.Formats.Number;

    obj.setCellFormat([str, str, num, num, num]);

    //    provide cells and headers text
    obj.setCellText(myData);
    obj.setHeaderText(myColumns);

    //    set number of rows/columns
    obj.setRowCount(20);
    obj.setColumnCount(5);

    //    enable row selectors
    obj.setSelectorVisible(true);
    obj.setSelectorText(function(i){return this.getRowPosition(i)+1});

    //    set headers width/height
    obj.setSelectorWidth(28);
    obj.setHeaderHeight(20);

    //    allow editing
    obj.setCellEditable(true);

    //    disable virtual rendering
    obj.setVirtualMode(false);

    //    set click action handler
    obj.onCellClicked = function(event, col, row){window.status = this.getCellText(col, row)};

    //    write grid html to the page
    document.write(obj);

    </script>
</body>
</html>

Это сообщение отредактировал(а) pythonwin - 17.8.2006, 13:03

Присоединённый файл ( Кол-во скачиваний: 21 )

grid_1.zip 44,84 Kb

--------------------

портал по Python
раздел на винграде по Python
язык Python

Tony

Дата 17.8.2006, 13:22 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

dstorm81,
outStr+="<tr>"+hndl2TRinTbl[i].innerHTML+"<\/tr>";akr.firstChild.nodeValue=''
опать у тебя эта кака.

--------------------

dstorm81

Дата 17.8.2006, 17:37 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

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

2 Tony люблю я эту бяку smile

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

pythonwin

Дата 18.8.2006, 08:59 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

Tony,

Код


onmouseout="this.style.backgroundColor=''"

это какой цвет?

Добавлено @ 09:06
Tony, пример кода интересаный, а можешь вставить рисунок в заголовок?

--------------------

портал по Python
раздел на винграде по Python
язык Python

Tony

Дата 18.8.2006, 13:43 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

onmouseout="this.style.backgroundColor=''" -это откат назад.
Можно вставить и рисунок в загаловок.Вставляй 4то хочешь. smile

.Етот пример евляется каркасом для j2ee custom tag'a.Поетому divi,scrolli i pro4e.Но я думаю что проблем с пониманием скрипта нету.Всё просто.

--------------------

pythonwin

Дата 19.8.2006, 13:55 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

хорошо, посмотрю...

--------------------

портал по Python
раздел на винграде по Python
язык Python

Tony

Дата 19.8.2006, 22:07 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

Version 1.2

Код


<html>
<head>
<title>Table test</title>
    <script type="text/javascript">
    /**
        created by Tjomi4
        19.08.2006
        version $1.2
    */
        var dsc=false;
        var selectedCol=0;
        var selectedCel="";
        function sortData(col,obj){
            selectedCol=col;
            var rowCount=document.getElementById(obj).getElementsByTagName("tr");
            var colContentArray=new Array();
        
            for(i=0;i<rowCount.length;i++)
                colContentArray[i]=rowCount[i];
            
            if(dsc){
                colContentArray=colContentArray.sort(doCompareDCS);    
                dsc=false;            
            }else{
                colContentArray=colContentArray.sort(doCompareASC);
                dsc=true;
            }
            
            elemTbody=document.createElement("tbody");
            
            for(r=0;r<colContentArray.length;r++)
                    elemTbody.appendChild(colContentArray[r]);                

            elemTable=document.getElementById(obj);
            elemTable.removeChild(elemTable.getElementsByTagName("tbody")[0]);
            elemTable.appendChild(elemTbody);
    
        }
            
        function doCompareDCS(a,b){            
            resA=getCellValue(a);
        resB=getCellValue(b);
        
            if (resA<resB) return 1;
            if (resA>resB) return -1;
            return 0;
        }
                
        function doCompareASC(a,b){
            resA=getCellValue(a);
        resB=getCellValue(b);

            if (resA<resB) return -1;
            if (resA>resB) return 1;
            return 0;
        }
        
        function getCellValue(elem){
            cellValue=elem.childNodes[selectedCol].firstChild;
            val=null;
            
        if(cellValue.nodeType!=3)
         val=cellValue.firstChild.nodeValue;                
        else
         val=cellValue.nodeValue;    

      if (!isNaN(val))    
         return Number(val);
     else
         return val;

        }
        
        function selectDadaGridCel(event){
                cel=event.target||event.srcElement;    
                if (cel.nodeName=="TD"){                
                    if (selectedCel!=""){
                        selectedCel.className="";
                    }
                    selectedCel=cel;            
                    cel.className="selectedCel";
                }
        }
        
        function selectRowMouseMove(event){
            cel=event.target||event.srcElement;
            rowSel=cel.parentNode;
            if (rowSel.nodeName=="TR"){
                rowSel.className="selectedRow";
            }
        }
        function rowMouseOut(event){
            cel=event.target||event.srcElement;
            rowSel=cel.parentNode;
            if (rowSel.nodeName=="TR"){
                rowSel.className="";
            }
        }
    </script>
    <style>
        .dataGrid{
            
        }
        .dataGrid_header{            
            background-color: #f5f5f5;
            border-collapse:collapse;
            font: normal 12px arial;
        }
        .dataGrid_header td {
            border: solid 1px #787878;
        }
        .dataGrid_body{
            border-collapse:collapse;
            background-color: #f5f5f5;
            font: normal 13px arial;
        }
         .dataGrid_body td{           
           border: solid 1px #787878;       
         }
         .selectedCel{
                background-color: #002266;
                font: normal 12px arial;
                color:#ffffff;
         }
            
            .selectedRow{
                background-color:#00BFFF;
            }
        .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%" class="dataGrid">
            <tbody>
                <tr>
                    <td>
                        <table border="0" width="100%" cellpadding="0" cellspacing="0" class="dataGrid_header" >
                            <col width="20%"/><col width="20%"/><col width="20%"/><col width="20%"/>
                            <tbody>
                                <tr align="center" style="cursor:pointer">
                                    <td onclick="sortData(0,'dataGrid')">год</td><td onclick="sortData(1,'dataGrid')">фамилия</td><td onclick="sortData(2,'dataGrid')">цена</td><td onclick="sortData(3,'dataGrid')">цена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" border="0" width="100%" cellpadding="0" cellspacing="0" class="dataGrid_body" bordercolor="000000" onclick="selectDadaGridCel(event)" onmousemove="selectRowMouseMove(event)" onmouseout="rowMouseOut(event)">
                                    <col width="20%"/><col width="20%"/><col width="20%"/><col width="20%"/>
                                    <tbody>
                                        <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>
                                        <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>

--------------------

Tony

Дата 20.8.2006, 17:31 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

version 1.3 .Теперь можно переходить от одной я4ейки к другой кнопкоми <-,->,^,down.Только надо вклу4ить/выклю4ить Еsc

Код


<html>
<head>
<title>Table test</title>
    <script type="text/javascript">
    /**
        created by Tjomi4
        19.08.2006
        version $1.3
    */
        var dsc=false;
        //dlja sortinga
        var selectedCol=0;
        //dlja videlenija vibrannoj(kak s pomoshju mishi tak i s pomoshju klivaish ->,<-,^,down ) ja4ejki cvetom
        var selectedCell="";
        //esli esc true, to razreshaetsja dvizhenie klavish <-,-> i t.d.
        var checkerESC=false;
        //esli na stranice neskalko dataGridov
        var selectedDataGridID="";
        
        document.onkeydown=keyPressOnDocument;
        function sortData(e,obj){
            e=e.target||e.srcElement;
            selectedCol=e.cellIndex;
            var rowCount=document.getElementById(obj).getElementsByTagName("tr");
            var colContentArray=new Array();
        
            for(i=0;i<rowCount.length;i++)
                colContentArray[i]=rowCount[i];
            
            if(dsc){
                colContentArray=colContentArray.sort(doCompareDCS);    
                dsc=false;            
            }else{
                colContentArray=colContentArray.sort(doCompareASC);
                dsc=true;
            }
            
            elemTbody=document.createElement("tbody");
            
            for(r=0;r<colContentArray.length;r++)
                    elemTbody.appendChild(colContentArray[r]);                

            elemTable=document.getElementById(obj);
            elemTable.removeChild(elemTable.getElementsByTagName("tbody")[0]);
            elemTable.appendChild(elemTbody);
    
        }
            
        function doCompareDCS(a,b){            
            resA=getCellValue(a);
        resB=getCellValue(b);
        
            if (resA<resB) return 1;
            if (resA>resB) return -1;
            return 0;
        }
                
        function doCompareASC(a,b){
            resA=getCellValue(a);
        resB=getCellValue(b);

            if (resA<resB) return -1;
            if (resA>resB) return 1;
            return 0;
        }
        
        function getCellValue(elem){
            cellValue=elem.childNodes[selectedCol].firstChild;
            val=null;
            
        if(cellValue.nodeType!=3)
         val=cellValue.firstChild.nodeValue;                
        else
         val=cellValue.nodeValue;    

      if (!isNaN(val))    
         return Number(val);
     else
         return val;

        }
        
        function selectDadaGridCel(event){
            selectedDataGridID=rowSel.parentNode.parentNode.id;
            cell=event.target||event.srcElement;    
            if (cell.nodeName=="TD"){                
                if (selectedCell!=""){
                    selectedCell.className="";
                }
                selectedCell=cell;            
                cell.className="selectedCell";
            }
        }
        
        function selectRowMouseMove(event){
            cell=event.target||event.srcElement;
            rowSel=cell.parentNode;
            //s kakoj tablicej rabotaem.
            selectedDataGridID=rowSel.parentNode.parentNode.id;
            
            if (rowSel.nodeName=="TR"){
                rowSel.className="selectedRow";
                window.status=" row:"+(rowSel.rowIndex+1);
            }
        }
        
        function rowMouseOut(event){
            cel=event.target||event.srcElement;
            rowSel=cel.parentNode;
            if (rowSel.nodeName=="TR"){
                rowSel.className="";
            }
        }
        
        function keyPressOnDocument(e){
            e=e||window.event;
            key=e.keyCode;
            if (key==27){
                if (checkerESC)
                    checkerESC=false;
                else
                    checkerESC=true;
            }else{
                if (key==37 || key==38 || key==39 || key==40){
                    if (selectedCell!="" && checkerESC==true){
                        selectedCellByKey(key);
                    }
                }
            }        
        }
        
        function selectedCellByKey(key){        
            oldCellIndex=selectedCell.cellIndex;
            row=selectedCell.parentNode;            
            rowIndex=row.rowIndex;
            cellCount=row.cells;            
            dataGridTable=document.getElementById(selectedDataGridID);

            if (key==37){
                if (oldCellIndex==0){
                    if (rowIndex!=0){
                        row=dataGridTable.rows[rowIndex-1];
                        newCell=row.cells[cellCount.length-1];
                        changeSelectedCellByKeyColor(selectedCell,newCell);
                        selectedCell=newCell;
                    }                    
                }else{
                    newCell=row.cells[selectedCell.cellIndex-1];
                    changeSelectedCellByKeyColor(selectedCell,newCell);
                    selectedCell=newCell;
                }
            }else{
                if (key==38){
                    if (rowIndex!=0){
                        newCell=dataGridTable.rows[rowIndex-1].cells[oldCellIndex];
                        changeSelectedCellByKeyColor(selectedCell,newCell);
                        selectedCell=newCell;
                    }
                }else{
                    if (key==39){
                        if (oldCellIndex+1==row.cells.length){
                            if (rowIndex+1<dataGridTable.rows.length){
                                row=dataGridTable.rows[rowIndex+1];
                                newCell=row.cells[0];
                                changeSelectedCellByKeyColor(selectedCell,newCell);
                                selectedCell=newCell;
                            }
                        }else{
                            newCell=row.cells[selectedCell.cellIndex+1];
                            changeSelectedCellByKeyColor(selectedCell,newCell);
                            selectedCell=newCell;
                        }
                    }else{
                        if(rowIndex+1<dataGridTable.rows.length){
                            newCell=dataGridTable.rows[rowIndex+1].cells[oldCellIndex];
                            changeSelectedCellByKeyColor(selectedCell,newCell);
                            selectedCell=newCell;
                        }
                    }
                }
            
            }        
        }
        function changeSelectedCellByKeyColor(oldCell,newCell){
            oldCell.className="";
            newCell.className="selectedCell";
        }
    </script>
    <style>
        .dataGrid{
            
        }
        .dataGrid_header{            
            background-color: #f5f5f5;
            border-collapse:collapse;
            font: normal 12px arial;
        }
        .dataGrid_header td {
            border: solid 1px #787878;
        }
        .dataGrid_body{
            border-collapse:collapse;
            background-color: #f5f5f5;
            font: normal 13px arial;
        }
         .dataGrid_body td{           
           border: solid 1px #787878;       
         }
         .selectedCell{
                background-color: #002266;
                font: normal 12px arial;
                color:#ffffff;
         }
            
            .selectedRow{
                background-color:#00BFFF;
            }
        .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>
        1
        <table cellpadding="0" cellpadding="0" border="0" width="100%" class="dataGrid">
            <tbody>
                <tr>
                    <td>
                        <table border="0" width="100%" cellpadding="0" cellspacing="0" class="dataGrid_header" >
                            <col width="20%"/><col width="20%"/><col width="20%"/><col width="20%"/>
                            <tbody>
                                <tr align="center" style="cursor:pointer">
                                    <td onclick="sortData(event,'dataGrid_1')">год</td><td onclick="sortData(event,'dataGrid_1')">фамилия</td><td onclick="sortData(event,'dataGrid_1')">цена</td><td onclick="sortData(event,'dataGrid_1')">цена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="0" width="100%" cellpadding="0" cellspacing="0" class="dataGrid_body" bordercolor="000000" onclick="selectDadaGridCel(event)" onmousemove="selectRowMouseMove(event)" onmouseout="rowMouseOut(event)">
                                    <col width="20%"/><col width="20%"/><col width="20%"/><col width="20%"/>
                                    <tbody>
                                        <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>
                                        <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>
        
        
        <br>
        2
        <table cellpadding="0" cellpadding="0" border="0" width="100%" class="dataGrid">
            <tbody>
                <tr>
                    <td>
                        <table border="0" width="100%" cellpadding="0" cellspacing="0" class="dataGrid_header" >
                            <col width="20%"/><col width="20%"/><col width="20%"/><col width="20%"/>
                            <tbody>
                                <tr align="center" style="cursor:pointer">
                                    <td onclick="sortData(event,'dataGrid_2')">год</td><td onclick="sortData(event,'dataGrid_2')">фамилия</td><td onclick="sortData(event,'dataGrid_2')">цена</td><td onclick="sortData(event,'dataGrid_2')">цена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_2" border="0" width="100%" cellpadding="0" cellspacing="0" class="dataGrid_body" bordercolor="000000" onclick="selectDadaGridCel(event)" onmousemove="selectRowMouseMove(event)" onmouseout="rowMouseOut(event)">
                                    <col width="20%"/><col width="20%"/><col width="20%"/><col width="20%"/>
                                    <tbody>
                                        <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>
                                        <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>

--------------------

pythonwin

Дата 25.8.2006, 13:12 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

пример с mochikit.com

особенно удобно для начинающих JS-ков

Код


<html>
    <head>
        <title>Sortable Tables from Scratch with MochiKit</title>
        <link href="http://mochikit.com/examples/sortable_tables/sortable_tables.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://mochikit.com/MochiKit/MochiKit.js"></script>
        <script type="text/javascript" src="http://mochikit.com/examples/sortable_tables/sortable_tables.js"></script>
    </head>

    <body>
        <table id="sortable_table" class="datagrid">
            <thead>
                <tr>

                    <th mochi:format="str">Domain Name</th>
                    <th mochi:format="isodate">Creation Date</th>
                    <th mochi:format="isodate">Expiry Date</th>
                    <th mochi:format="istr">Organization Name</th>
                </tr>
            </thead>
            <tfoot class="invisible">

                <tr>
                    <td colspan="0"></td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>mochibot.com</td>
                    <td>2005-02-10</td>

                    <td>2007-02-10</td>
                    <td>Jameson Hsu</td>
                </tr>
                <tr>
                    <td>pythonmac.org</td>
                    <td>2003-09-24</td>
                    <td>2006-09-24</td>

                    <td>Bob Ippolito</td>
                </tr>
                <tr>
                    <td>undefined.org</td>
                    <td>2000-01-10</td>
                    <td>2006-01-10</td>
                    <td>Robert J Ippolito</td>

                </tr>
                <tr>
                    <td>python.org</td>
                    <td>1995-03-27</td>
                    <td>2007-03-28</td>
                    <td>Python Software Foundation</td>
                </tr>

            </tbody>
        </table>
    </body>
</html>

--------------------

портал по Python
раздел на винграде по Python
язык Python

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »