Jump to content

Javascript and table


FastDuck

Recommended Posts

HelloI am having problems with a simple calendar function. The code works alright, but when i run it trough the validation, witch i try to make my whole site stand up against, i get an error, can't really figure the solution. This is a partial code witch works, but as said don't validate, any got a solution?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html lang="da"><head><title>Some Title</title><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head><body><script type="text/javascript">	var idx = 3;	var idy = 0;</script><table>	<script type="text/javascript">  if((idy % idx) == 0){  	dokment.write("<tr>");  	++idy  }	</script>  <td>  <script type="text/javascript">  	<!-- get content for each mont from db, repeat until 1 year is shown-->  </script>  </td>	<script type="text/javascript">  if((idy % idx) == 0){  	dokument.write("<\/tr>");  }	</script></table></body></html>

This make a 3 by 4 calendar trough a php function, the comment inside the td tag, and as said works flawless, don't validate though. There are a bunch more in this, but these few lines sums it up i think.Anders

Edited by Jonas
Link to comment
Share on other sites

If you're asking for help with validation errors, you need to post the errors as well as the code.Line 13 column 30: document type does not allow element "SCRIPT" here; assuming missing "CAPTION" start-tag.Line 19 column 4: document type does not allow element "TD" here.Line 29 column 7: end tag for "CAPTION" omitted, but its declaration does not permit this.Line 29 column 7: end tag for "TABLE" which is not finished.The reason it is complaining is because of all the javascript you have all over the place. In the doctype you selected, script tags are only allowed inside the head. Also, I seriously doubt this code is actually working, regardless of what you see in the browser, because you refer to both "dokment" and "dokument", the object is called "document".

Link to comment
Share on other sites

Well, the code works, and you are allowed scripts other places than inside the <head> tag, and beside from a few typos.. try validating this code.....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html lang="da"><head><title>Some Title</title><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head><body><script type="text/javascript">	var idx = 3;	var idy = 0;</script><table border="1">	<tr>  <td>  <script type="text/javascript">  	if((idy % idx) == 0){    document.write("Hello world")  	}  </script>  </td>	</tr></table></body></html>

Beside from a few typos in a script function, you should be able to guess that its document.write(.... but for clarification, here is the correct code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html lang="da"><head><title>Some Title</title><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head><body>	<script type="text/javascript">		var idx = 3;		var idy = 0;	</script>	<table>	<script type="text/javascript">		if((idy % idx) == 0){			document.write("<tr>");			++idy		}	</script>		<td>			<script type="text/javascript">				<!-- get content for each mont from db, repeat until 1 year is shown-->			</script>		</td>	<script type="text/javascript">		if((idy % idx) == 0){			document.write("<\/tr>");		}	</script>	</table></body></html>

So with that in place... the validation messages is seen in justsomeguy's post...Anders

Edited by Jonas
Link to comment
Share on other sites

The errors are because of where the script tags are located, it wants the script tags inside containers. A table tag is not a container, it wants the script tag inside a td or another container.

Link to comment
Share on other sites

If you look for JS validating, use try...catch or onerror at the JS tutorial. But one thing pointed me to the eye.This:

<script type="text/javascript"><!-- get content for each mont from db, repeat until 1 year is shown--></script>

Comments in JS should be // comment, not <!-- comment --> because <!-- comment --> is for HTML, // comment for JavaScript.

Link to comment
Share on other sites

Yes, i figured that out myself. what i am looking for is a solution..
A solution is to use a client-side language instead of Javascript, calendars are pretty easy to do server-side.If you're really hard-up to do it client-side, then you could make each week it's own table. I'm not entirely sure what type of calendar this is, but I assume it's monthly where it shows 1 month with all the days laid out in rows of 7 days. If that's the case, you can have it be a base table with 7 one-cell rows, and in each row have a nested table with the 7 days. Regardless, however you do it client-side, it's going to be more of a headache and less reliable then anything you do server-side.
Link to comment
Share on other sites

Here's something to get you started with, I copied this out of a fairly old project so the markup isn't exactly up to spec, but it should give you a good start.example

<html>  <head>    <title>Calendar</title>    <style type="text/css">      body {        margin: 0;        padding: 0;        height: 100%;      	font-family: "Verdana", sans-serif;      	color: #000000;      	font-size: 12px;      }      .calendar_row {        height: 60px;      }      .calendar_day_inactive {        background-color: #C0C0C0;        border: 1px solid black;        width: 14%;      }      .calendar_day_current {        background-color: #FFE8DC;        border: 1px solid black;        width: 14%;      }      .calendar_day {        background-color: #ECE8DC;        border: 1px solid black;        width: 14%;      }      .calendar_day_wkend {        background-color: #DCD8CC;        border: 1px solid black;        width: 14%;      }      .table_header {        border-left: 0px;        border-right: 0px;        border-top: 1px;        border-bottom: 2px;        border-color: #000090;        border-style: solid;        background-color: #D0C0C0;        font-size: 11px;        font-weight: bold;      }            .border_light {        border: 1px solid #000090;        background-color: #F0F0F6;        padding: 0px;      }            .content_text {        font-size: 11px;      }    </style>  </head>  <body>    <table class="border_light" cellspacing="0" cellpadding="2" width="100%">      <tr>        <td class="table_header"><b>Calendar</b></td>      </tr>      <tr>        <td valign="top"><?php$calmon = (isset($_GET['calmon']) ? $_GET['calmon'] : time());$now = getdate();$cur = getdate($calmon);$month = getdate(mktime(0, 0, 0, $cur['mon'], 1, $cur['year']));$prev = mktime(0, 0, 0, $cur['mon'] - 1, 1, $cur['year']);$next = mktime(0, 0, 0, $cur['mon'] + 1, 1, $cur['year']);echo "<table border=\"0\" cellspacing=\"0\" cellpadding=\"2\" width=\"100%\">";echo "<tr>";echo "<td width=\"33%\" class=\"content_text\" align=\"left\"><a href=\"calendar.php?calmon={$prev}\">«Last Month</a></td>";echo "<td width=\"34%\" class=\"content_text\" align=\"center\"><b>{$month['month']} {$month['year']}</b></td>";echo "<td width=\"33%\" class=\"content_text\" align=\"right\"><a href=\"calendar.php?calmon={$next}\">Next Month»</a></td>";echo "</tr>";echo "</table>";echo "<table border=\"0\" cellspacing=\"0\" cellpadding=\"2\" width=\"100%\">";echo "<tr class=\"content_text\">";echo "<td class=\"table_header\" align=\"center\" style=\"border-left: 1px solid black;\"><b>Sun</b></td>";echo "<td class=\"table_header\" align=\"center\"><b>Mon</b></td>";echo "<td class=\"table_header\" align=\"center\"><b>Tue</b></td>";echo "<td class=\"table_header\" align=\"center\"><b>Wed</b></td>";echo "<td class=\"table_header\" align=\"center\"><b>Thu</b></td>";echo "<td class=\"table_header\" align=\"center\"><b>Fri</b></td>";echo "<td class=\"table_header\" align=\"center\" style=\"border-right: 1px solid black;\"><b>Sat</b></td>";echo "</tr>";echo "<tr class=\"calendar_row\">";for ($i = 0; $i < $month['wday']; $i++)  echo "<td class=\"calendar_day_inactive\"> </td>"; #show last month's days leading up until the 1stwhile ($month['mon'] == $cur['mon']){  if ($now['mday'] == $month['mday'] && $now['mon'] == $cur['mon'])    $class = "calendar_day_current";  elseif ($month['wday'] == 0 || $month['wday'] == 6)    $class = "calendar_day_wkend";  else    $class = "calendar_day";  echo "<td class=\"{$class}\" valign=\"top\">";  echo "<span align=\"left\" class=\"small_text\">{$month['mday']}";  echo "</span></td>";  $month = getdate($month[0] + 86400);  if ($month['wday'] == 0 && $month['mon'] == $cur['mon'])  {    echo "</tr>";    echo "<tr class=\"calendar_row\">";  }}if ($month['wday'] != 0){  for ($i = $month['wday']; $i <= 6; $i++)    echo "<td class=\"calendar_day_inactive\"> </td>";  echo "</tr>";}echo "</table>";echo "</td>";echo "</tr>";echo "</table>";?>  </body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...