Menu
Hi,
I’m trying to create a table using css and javascript to have alternate row colors and buttons (the background corners of the buttons to blend in with the row background, so I’m using two button images). I’ve found several scripts on alternating row colors, but nothing on how to add an image (in this case, a button)to the last table cell in each alternate row. And by being new to javascript, I’ve been trying to figure out how to do this on my own by trial and error. (oh, adding the alternateimage function is my attempt, the first function is by the person who wrote the script so it follows very well with the “colors” in the top section of the CSS code.)
Here is the javascript code:
[CODE]
<script language=”javascript” type=”text/javascript”>
<!–
function alternatecolor(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName(“tr”);
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = “color_one”;
}else{
rows[i].className = “color_two”;
}
}
}
}
function alternateimage(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var cells = table.getElementByTagName(“td”);
for(x = 0; x < cells.length; i++){
if(x % 2 == 0){
cells[x].className = “firstRow”;
}else{
cells[x].className = “altRow”;
}
}
}
}
// –>
</script>
Here’s the CSS code:
[CODE]
<style type=”text/css”>
<!–
.tableheader {
color: #ffffff;
background-color: #000000;
}
.color_one {
color: #000000;
background-color: #cccccc;
}
.color_two {
color: #ffffff;
background-color: #eeeeee;
}
.firstRow {
background-image: url(images/btn_results_ndx_dk.gif);
background-repeat: no-repeat;
background-position: left;
}
.altRow {
background-image: url(images/btn_ch_delete_ndx_lt.gif);
background-repeat: no-repeat;
background-position: left;
}
–>
</style>
Here’s the HTML:
[CODE]
<body onload=”alternatecolor(‘alter_rows’); alternateimage(‘alter_rows’);”>
<table width=”90″ border=”0″ cellpadding=”0″ cellspacing=”0″ id=”alter_rows”>
<tr class=”tableheader”>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
It’s totally screwed and I’m trying different javascripts and css for this effect, but this one looked like the simplest (as far as alternating the colors).
If you don’t mind helping me out, or directing me to a good tutorial, for what it’s worth, you have my sincerest thanks.
Carmen