本文介绍了一种通过JavaScript实现的表格行交互效果，包括行的选择和背景颜色的变化。通过简单的HTML和JavaScript代码，实现了行点击时背景变红，并提示该行的标题信息。此外，还展示了如何使用CSS表达式来设置奇偶行不同的背景颜色。
Table行选择
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style> .EvenOrOddRow{ background-color: expression((this.sectionRowIndex%2)?'white':'#E0E0E0'); } </style>
<script>
var currentActiveRow;
function changeActiveRow(obj) {
if(currentActiveRow)
currentActiveRow.style.backgroundColor="";
currentActiveRow=obj;
currentActiveRow.style.backgroundColor="Red";
alert(currentActiveRow.title);
}
</script>
</head>
<body>
<table width="100%">
<tr bgcolor="#aaaaaa" >
<td>Code</td><td>Name</td>
</tr>
<tr title="0001" class="EvenOrOddRow" onclick="changeActiveRow(this);">
<td>001</td><td>Googol</td>
</tr>
<tr title="0002" class="EvenOrOddRow" onclick="changeActiveRow(this);">
<td>002</td><td>CaoJia</td>
</tr>
<tr title="0003" class="EvenOrOddRow" onclick="changeActiveRow(this);">
<td>003</td><td>XueFeng</td>
</tr>
<tr title="0004" class="EvenOrOddRow" onclick="changeActiveRow(this);">
<td>004</td><td>ChenLou</td>
</tr>
</body>
扫一扫
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
