October 16th, 2006, 08:29 AM
|
|
Contributing User
|
|
Join Date: Aug 2005
Location: North East, UK
|
|
|
Javascript/ASP toggle row colours
Here is a script using ASP VBScript to output a table with alternate row colours.
It uses a Javascript function to toggle the row colours onmouseover/onmouseout.
It also has a checkbox to highlight a selected row.
Some info
1) Use CSS to set the row colours
2) Use the MOD function to alternate the CSS Class
http://computer-helpforum.com/asp/J..._checkbox.a sp
Code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.row1 {
background-color: #CCCCCC;
}
.row2 {
background-color: #999999;
}
.rowHover {
background-color: #666666;
}
.rowSelected {
background-color: #CCCCFF;
}
-->
</style>
<script type="text/javascript">
function toggle(rowid, chkid, rClass){
row = document.getElementById(rowid);
chk = document.getElementById(chkid);
hClass = 'rowHover';
sClass = 'rowSelected';
row.className = (!chk.checked && row.className != hClass) ? hClass : rClass;
if(chk.checked){ row.className = sClass; }
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="80%" border="1" cellspacing="0" cellpadding="2">
<%
For x=1 To 10
If x Mod 2 = 1 Then
rowClass = "row1"
Else
rowClass = "row2"
End If
%>
<tr id="row_<%=x%>" class="<%=rowClass%>" onmouseover="toggle('row_<%=x%>','chk_<%=x%>','<%=rowClass%>')" onmouseout="toggle('row_<%=x%>','chk_<%=x%>','<%=rowClass%>')">
<td width="25"><input type="checkbox" id="chk_<%=x%>" name="chk_<%=x%>" value="<%=x%>" onclick="toggle('row_<%=x%>','chk_<%=x%>','<%=rowClass%>')"></td>
<td>Cell <%=x%></td>
</tr>
<% Next %>
</table>
</form>
</body>
</html>
|
ASP Free Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
