Спасибо большое, вот только это всего лишь поверхность айсберга. Там я в 3 комментариях написал три задачи:| Код |
<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')">Очки(рейтинг)</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>Áèðþ÷åâ</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 href="#">a
<!--При наведении выводится комментарий с историей обьекта, с его кратким описанием. Причем этот комментарий можно менять зайдя по ссылке. Зайдя по ссылке внутри должно быть что-то вроде форума или блога, то есть нужно видеть не только последнее изменение, но и предыдущие. Как вам задачка? -->
</a></td>
<td>1.9</td><td>81</td></tr>
<tr><td>1845</td><td>a</td><td>114.8</td><td>83</td></tr>
<tr><td>1945</td><td>Òð</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>Áèðþ÷åâ</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>1998</td>
<td>a</td><td>1.9</td><td>81</td></tr>
<tr><td>1845</td><td>a</td><td>114.8</td><td>83</td></tr>
<tr><td>1945</td><td>Òð</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>
|
 |