<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>table</TITLE>
<STYLE>
table
{
    border-top:1px solid black;
    border-left:1px solid black;
    cursor:default;
}
td
{
    border-bottom:1px solid black;
    border-right:1px solid black;
    height:23px;
}
</STYLE>
<SCRIPT language="javascript">
function selectedColorTable(tableId,notSelectRowIndex,overColor,clickColor)
{
    if(overColor == null)
        window.selectedColorTable_overColor = "#E1E9FD";
    else
        window.selectedColorTable_overColor = overColor;
    if(clickColor == null)
        window.selectedColorTable_clickColor = "#CCCCFF";
    else
        window.selectedColorTable_clickColor = clickColor;

    if(tableId == null)
        return;
    if(notSelectRowIndex == null)
        var notSelectTableRowIndex = 0;
    else
        var notSelectTableRowIndex = notSelectRowIndex;

    for(var i=notSelectTableRowIndex + 1; i<document.all(tableId).rows.length; i++)
    {
        document.all(tableId).rows[i].onmouseover = over;
        document.all(tableId).rows[i].onmouseout = out;
        document.all(tableId).rows[i].onclick = change;
    }
}function change()
{
    var oObj = event.srcElement;
    if(oObj.tagName.toLowerCase() == "td")
    {
        var oTr = oObj.parentNode;
        var oTable = oTr.parentNode.parentNode;
        for(var i=1; i<oTable.rows.length; i++)
        {
            oTable.rows[i].style.backgroundColor = "";
            oTable.rows[i].tag = false;
        }
        window.preTr = oTr;
        oTr.style.backgroundColor = window.selectedColorTable_clickColor;
        oTr.tag = true;
    }
}function out()
{
    var oObj = event.srcElement;
    if(oObj.tagName.toLowerCase() == "td")
    {
        var oTr = oObj.parentNode;
        if(!oTr.tag)
            oTr.style.backgroundColor = "";
    }
}function over()
{
    var oObj = event.srcElement;
    if(oObj.tagName.toLowerCase() == "td")
    {
        var oTr = oObj.parentNode;
        if(!oTr.tag)
            oTr.style.backgroundColor = window.selectedColorTable_overColor;
    }
}function nextCell()
{
    var rowNum = 1;
var oTable = document.all.colorTable;
    if(window.preTr == null)
        return;
    if(!window.preTr.nextSibling)
        rowNum = 1;
    else
        rowNum = window.preTr.nextSibling.rowIndex;
    for(var i=1; i<oTable.rows.length; i++)
    {
        oTable.rows[i].style.backgroundColor = "";
        oTable.rows[i].tag = false;
    }
    oTable.rows[rowNum].style.backgroundColor = window.selectedColorTable_clickColor;
oTable.rows[rowNum].tag = true;
window.preTr =  oTable.rows[rowNum];
}
</SCRIPT>
</HEAD><BODY onload="new selectedColorTable('colorTable')">
<TABLE id="colorTable" onselectStart="return false" id="table1" width="50%" border="0" cellpadding="0" cellspacing="0">
  <TR style="background-color:#999999; border-bottom:2px solid black; height:25px" align="center">
    <TD >one</TD>
    <TD >two</TD>
    <TD >three</TD>
    <TD >four</TD>
  </TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>      
</TABLE>
<p>
<INPUT TYPE="button" onclick="nextCell()" value=next>
</BODY>
</HTML>