Break smaller fields from a large field in HTML

[codingisfun]

I have a "Quantities" field and length is 96. It has information on items sold for last 2 years (each month has fixed length 4). Is there a way to receive this field in HTML and break it into 24 sub fields and show it in a TABLE format?

Also, I am developing an HTML document and has following layout:

Table1 ------------------ Table 2
Item 1 qty1-------------> Month details
Item 2 qty2

etc..

When user moves cursor to qty1 in table1, table 2 should show its details. When user moves cursor to qty2 in table2, table2 should show qty2 month details.

Can this be done?

[TJ111]

It can be done using straight javascript, though in this scenario ajax would be preferable, but not with html alone.

[codingisfun]

I learned a little from this site. However, I am interested to learn more. One more question. How do I this with Java Script. Just an example please? I think we are dealing with arrays right?

Lets say I have the above table1 and only displays 10 records at a time. Is there a way to store those 10 month records in an array and display in table2 when cursor moves rather than reading each time from a database?

[bals28mjk]

It can be done using straight javascript, though in this scenario ajax would be preferable, but not with html alone.Forgot to mention - I am new to Web, HTML, Java, etc.

How do I this in Java Script.
He is refering to JavaScript the language; not scripts written in Java :p . And yes, it all can be accomplished. Though, before using other's examples you might want to read a quick tutorial (http://www.w3schools.com/js/js_intro.asp). Once you get a basic understanding of the language you will be less confused when your toying around with examples and other code people have written.

[TJ111]

Absolutely. I don't exactly follow your needs, but here's how to do it if you had, say, two tables. You may need to use some CSS to get the tables to appear as one table. This isn't the best method for doing this, but hopefully will get you started. Follow the examples, play around with the javascript, and it will help give you a general idea on how to use it. Then you can use it and apply it to your own needs.

Make the tables:

<table>
<tr>
<th colspan='2'>Sales Info</th>
</tr>
<tr>
<td>Years</td>
<td>Months</td>
</tr>
</table>

<!--Give them an ID and make them hidden by default-->
<table id="years" style="display:none">
<tr>
<td>2006</td>
<td>$32452</td>
</tr>
<tr>
<td>2005</td>
<td>$23453</td>
</tr>
</table>

<!--once again, give it an ID and make it hidden-->
<table id="months" style="display:none">
<tr>
<td>Jan '05</td>
<td>$1254</td>
</tr>
<tr>
<td>Feb '05</td>
<td>$1456</td>
</tr>
<!--etc, etc,-->
</table>


Then make a javascript function:

function showHide(show) {
//get the elements by their id, save them as variables
var months = document.getElementById('months');
var years = document.getElementById('years');



//hide both tables by default
months.style.display = "none";
years.style.display = "none";

//If the table you want to show is hidden, make it visible
if (document.getElementById(show).style.display == "none") {
document.getElementById(show).style.display = "";
}
}

Then you add event handlers to the table to make it show and hide the table fields.


<table>
<tr>
<th colspan='2'>Sales Info</th>
</tr>
<tr>
<td onmouseover="showHide('years')">Years</td>
<td onmouseover="showHide('months')">Months</td>
</tr>
</table>


So when you mouseover the table cell "Years", the function showHide is called, passing the variable "years". Like I said experiment with this, don't copy and paste it, type it out for yourself. You'll get the hang of it pretty quick.