Javascript with tables

Discussion in 'Programming' started by Snakez, Oct 30, 2007.

  1. #1
    FONT="Franklin Gothic Medium"]Hey guys, i think this is the right section for this post, as it involves JavaScript.

    I am currently an IT student, and i am in a web programming course.

    Thus far i have learnt xhtml and Css. Recently we began with JavaScript.

    With an upcoming exam on Thursday, i have been running trhough some pass assignments students were made to do.

    I came across this one particular one that interests me.

    It states, that using HTML, Javascript and CSS we must create a webpage that, upon loading, prompts the user for "Sales Amount" for the first 6 months of the year. The user is expected to enter integer values between 0 and 100 for each month. Use these figures to create a horizontal bar chart representing these values as illustrated in the figure below.

    Basically it looks like this.

    Jan [and to the side is the bar]

    The key thing here is that, when the user inputs a value, say for intsance for January he puts 80, the chart would stretch for 80, if he decides to put it at 35, it would represent a small bar.

    Now i have run into some problems here, and i really have noc lue how i should go about fixing this.

    This is what i made so far codewise:


    1. <html xmlns="http://www.w3.org/1999/xhtml">
    2.
    3. <head> <title> Graphic Application Form </title>
    4. <link rel="stylesheet" type="text/css" href="style.css" />
    5. <script language="JavaScript" type="text/javascript">
    6. <![CDATA[
    7.
    8. var x;
    9. var y;
    10. var z;
    11.
    12. x = prompt ("Enter Sales Data for January");
    13.
    14.]]>
    15.
    16. </script>
    17. <head>
    18.
    19. <body>
    20.
    21. <center> <h1> Sales Data for January - June </h1> </center>
    22.
    23.<table border="0">
    24.
    25. <tr>
    26. <th> Jan </th>
    27. <td colspan = x bgcolor="green" align="center"> </td>
    28. </tr>
    29.
    30.
    31. </table>
    32.
    33. </body>
    34. </html>


    ---

    In line 27 above... i know something like that won't work, but i think something must be dont like that in order to work.

    I think that something needs to be able to make the prompt variable change the colspan to different sizes. I have no idea what i should do next.

    Don't do it for me, just get me working on the right track, i wanna see if i could solve it!

    Thanks in advance.[/FONT]
     
    Snakez, Oct 30, 2007 IP
  2. justinbezanson

    justinbezanson Peon

    Messages:
    160
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Colspan is not the way to go you should have 2 columns. 1 for month and one for your bar.

    In the second column create a div and calculate and set the divs width based on the value for that month. If the numbers are between 0 and 100 then it is easy you can just apply the value as a percentage for the width.

    You will need to give the second column a fixed width so that the div inside can use percentages correctly.
     
    justinbezanson, Nov 1, 2007 IP