Javascript - Is this possible

[pb4]

Hi,

I want to be able to have this table structure within my zen cart: HERE

(design prices blue table).

This is currently working on a non zen cart site.

This is the script in the head:

  <script language="JavaScript" src="crumb.js"></script>
  <link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>

I have the tablecloth.css and tablecloth.js files.

How would I get this to work on my site? Where would I put the files? Where would I put the code for the head?

Thanks

[gjh42]

There's no need to use javascript to do that job. You can put the HTML table code into your define page content, with appropriate CSS classes for elements, and add rules to your stylesheet for static and hover styling properties.

[pb4]

Ok, that's great - thanks.

I currently have this for the css:

table2, td{
	font:100% Arial, Helvetica, sans-serif; 
}
table2{width:100%;border-collapse:collapse;margin:1em 0;}
th, td{text-align:left;padding:.5em;border:1px solid #fff;}
th{background:#80b7dd url(tr_back.gif) repeat-x;color:#fff;}
td{background:#edf2f8;}

/* tablecloth styles */


#table2 a:link {color: white;}
#table2 a:visited {color: white;}
#table2 a:hover {color: white;}
#table2 a:active {color: white;}



tr.even td{background:#ecf4ff;}
tr.odd td{background:#d9ebf8;}

th.over, tr.even th.over, tr.odd th.over{background:#8dc3e9;}
th.down, tr.even th.down, tr.odd th.down{background:#bce774;}
th.selected, tr.even th.selected, tr.odd th.selected{}

td.over, tr.even td.over, tr.odd td.over{background:#ecfbd4;}
td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;}
td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;}

/* use this if you want to apply different styleing to empty table cells*/
td.empty, tr.odd td.empty, tr.even td.empty{background:#fff;}

I've changed the 'table' to 'table2' but this is effecting the whole page..what else do I need to change?

This is within my html for the table:

<div id="table2">

<table cellspacing="0" cellpadding="0">			
	<tr>		
			<th></th>		
		<th><a href="http://ampmgraphicsprint.com/index.php?main_page=product_info&cPath=99&products_id=238">A6 design</a></th>
		<th><a href="http://ampmgraphicsprint.com/index.php?main_page=product_info&cPath=99&products_id=238">DL design</a></th>
		<th><a href="http://ampmgraphicsprint.com/index.php?main_page=product_info&cPath=99&products_id=239">A5 design</a></th>
		<th><a href="http://ampmgraphicsprint.com/index.php?main_page=product_info&cPath=99&products_id=240">A4 design</a></th>
	</tr>
	<tr>
			<td>Single sided</td>
		<td>£40</td>
		<td>£40</td>
				<td>£50</td>
		<td>£65</td>

	</tr>
	<tr>
		<td>Double sided</td>
		<td>£50</td>
		<td>£50</td>
		<td>£65</td>
				<td>£85</td>

	</tr>
					
</table></div>

Thanks

[gjh42]

table2, td{
font:100% Arial, Helvetica, sans-serif;
}
table2{width:100%;border-collapse:collapse;margin:1em 0;}
th, td{text-align:left;padding:.5em;border:1px solid #fff;}
th{background:#80b7dd url(tr_back.gif) repeat-x;color:#fff;}
td{background:#edf2f8;}

The table2 is invalid, and the , td means that the rule will apply to every table cell sitewide. What you want here is probably this:

#table2 td{
font:100% Arial, Helvetica, sans-serif;
}
#table2{width:100%;border-collapse:collapse;margin:1em 0;}
#table2 th, #table2 td{text-align:left;padding:.5em;border:1px solid #fff;}
#table2 th{background:#80b7dd url(tr_back.gif) repeat-x;color:#fff;}
#table2 td{background:#edf2f8;}

[gjh42]

The .even, .odd, .over, .down, etc. are probably classes that javascript adds to elements when needed. CSS doesn't work that way; you use the :hover pseudo-class in your stylesheet to affect the styling of an element when moused over. If you want even/odd styling, you need to add that to the elements explicitly. I don't see a use for that in your example, though. There are lots of other elements in the code you show that need to be updated along these lines.