可以设置奇数页和偶数页为不同颜色，标题行不参与变化，鼠标在其上时改一个颜色，移走后还原，点击后改变颜色，点击另外行后以前的还原。
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>table颜色变换</TITLE>
<script>
var nn = 1
function init()
{
o = document.getElementById("tb").rows
for(i = 1;i<o.length;i++)
{
if(i % 2 == 0 )
o[i].bgColor="red" //偶数页背景颜色
else
o[i].bgColor="green" //奇数页背景颜色
if(document.getElementById("tb").getAttribute("where") != "")
document.getElementById("tb").rows[parseInt(document.getElementById("tb").getAttribute("where"))].bgColor="#FF00FF" //点击后颜色改变为
if(1==nn)
{
o[i].attachEvent("onmouseover",mov)
o[i].attachEvent("onmouseoutr",mot)
}
}
nn++
}
function mov()
{
init()
e = event.srcElement
if(e.tagName=="TABLE" || e.tagName=="TBODY") return
while(e.tagName != "TR")
e = e.parentElement
if(e.tagName=="TR")
e.bgColor="#0000FF" //鼠标在上面时的颜色
}
function mot()
{
init()
}
function SetColor()
{
e = event.srcElement
if(e.tagName=="TABLE" || e.tagName=="TBODY") return
while(e.tagName != "TR")
e = e.parentElement
if(e.tagName=="TR")
{
if(e.rowIndex==0) return
e.bgColor="#FF00FF"
document.getElementById("tb").setAttribute("where",e.rowIndex)
}
init()
}
</script>
</HEAD>
<BODY ONLOAD="init()">
<DIV ALIGN="CENTER">
<TABLE BORDER="1" cellspacing="0" cellpadding="0" onclick="SetColor()" onmouseout="mot()" id=tb where="">
<Tr>
<TD>第一列</TD>
<TD>第二列</TD>
<TD>第三列</TD>
<TD>第四列</TD>
<TD>第五列</TD>
<TD>第六列</TD>
<TD>第七列</TD>
<TD>第八列</TD>
</TR>
<TR>
<TD WIDTH="88">11</TD>
<TD WIDTH="88">12</TD>
<TD WIDTH="88">13</TD>
<TD WIDTH="88">14</TD>
<TD WIDTH="88">15</TD>
<TD WIDTH="88">16</TD>
<TD WIDTH="88">17</TD>
<TD WIDTH="88">18</TD>
</TR>
<TR>
<TD>21</TD>
<TD>22</TD>
<TD>23</TD>
<TD>24</TD>
<TD>25</TD>
<TD>26</TD>
<TD>27</TD>
<TD>28</TD>
</TR>
<TR>
<TD>31</TD>
<TD>32</TD>
<TD>33</TD>
<TD>34</TD>
<TD>35</TD>
<TD>36</TD>
<TD>37</TD>
<TD>38</TD>
</TR>
<TR>
<TD>41</TD>
<TD>42</TD>
<TD>43</TD>
<TD>44</TD>
<TD>45</TD>
<TD>46</TD>
<TD>47</TD>
<TD>48</TD>
</TR>
<TR>
<TD>51</TD>
<TD>52</TD>
<TD>53</TD>
<TD>54</TD>
<TD>55</TD>
<TD>56</TD>
<TD>57</TD>
<TD>58</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>
0 评论: