DEMO1: http://www.whcgch.com/persionalweb/jowing/js/cssgrid.htm
代码:
编号 标题 类别 日期 点击
<script>
function GridInit(){
//该函数实现行的交替背景色以及onmouseover鼠标事件效果及点击事件绑定//
oUL = document.getElementById('GridBody');
oLIs = oUL.childNodes;
var rowNum = 0;
var oLI = null;
for(var i = 0; i < oLIs.length; i++){
oLI = oLIs[i];
if(oLI && oLI.tagName == 'DIV' && oLI.id != 'GridHead'){
oLI.onclick = function(){
RowClick()
}
rowNum++;
oLI.onmouseover = function(){
this.className = 'DataGridRowSelect';
};
if(rowNum % 2 == 1){
oLI.className = 'Bg1';
oLI.onmouseout = function(){
this.className = 'Bg1';
};
}else{
oLI.className = 'Bg2';
oLI.onmouseout = function(){
this.className = 'Bg2';
};
}
}
};
}
function RowClick()
{
alert("点击了编号为:"+event.srcElement.parentNode.childNodes[0].innerHTML+"的记录!")
}
</script>
这个是按百份比来设置长度的,不支持横向滚动功能。如果Grid的列较多的话,则Span需设为PX类型,用CSS实现起来很麻烦,而我实现的大概思路是用两个DIV overflow,一个负责DataGrid横向滚动,一个负责DataBody的纵向滚动。代码就不贴了,有兴趣的可以参考: