Help With Table Formula's

[james_09]

Hi,

I'm not sure if this is the right place to ask this. I'm fairly new to web design and just about understand the very basics of HTML and CSS, but I believe some kind of script is now needed for what I wish to achieve.

I have built a site from scratch in HTML and CSS. My site has a lot of data tables. These are currently set up in HTML with rows and columns which I type data in manually (directly in the HTML).

One column in each table displays a time - it shows different time for each row and is displayed in the format "2d 10h 30m" denoting days, hours and minutes.

I would like all of these times to be updated by a user inputting a single number in a box at the top of the page (call this number X).

This number will then have the following formula applied (X + 100)/100 = Y

Finally all of the times in my table will be divided by Y to give new values.

How is the best way to go about this? I can go through and change the format of the times if necessary.

Not sure if I have explained this very well, but any help would be most appreciated.

Thanks

James

[lucy24]

Yup, that's a scripting issue. Broadly, anything that changes in response to user action requires javascript. You've got two questions and it's not clear which one you're concerned with.

#1 the exact command that triggers all the time-changing. For example, the key box could be set up as a form like

<form action = "javascript:handleTextInput()">
<input type = "text" id = "textinput">
</form>

That's a cut-and-paste from code that I personally use, where "handleTextInput()" is the name I've given to the function, "textinput" is the ID I've assigned to the field. fotiman or someone like him can probably suggest half a dozen equally valid alternatives.

#2 the mechanics of the change. Just how many cells are in your table? If you want each one to be handled individually, you'd have to give each cell a separate ID. You then get its content, convert it to a numerical value, and do stuff. It may be more practical to build the table itself in javascript. Store the values in memory and let the javascript spit out a string that involves "<td> result-of-function-here </td>".

If the table is built in javascript, make sure you've got appropriate <noscript> code so something displays for scriptless users.

The script itself can either live on the originating page-- if it's short-- or in a separate document with .js extension, referenced by a <script src> line in the HTML. Exact location of the line depends on what you want the user to see when the page first opens, before they've taken any action. The closer to the bottom, the better.

[james_09]

Thank you for your reply.

A typical example of a table on a single page would be 8 columns by 20 rows. The first 7 columns of the data is text and does not need to change.

The final column has the times. Whilst the time values are different in each row, they will all be updated at the same time based on the same formula with the user value applied to that formula.

Would it be easier to keep the original column 8 with times fixed and add a new column 9 which displays the updated times run through the Java script?

[lucy24]

Would it be easier to keep the original column 8 with times fixed and add a new column 9 which displays the updated times run through the Java script?

I don't think it would make a significant difference, thanks to the way tables are constructed in HTML. Tables are made up of rows which in turn are made of cells. A "column" has meaning for a handful of format commands such as background-color and borders; everything else is based on rows.

I started out thinking in terms of "id", which is a unique identifier. But maybe it would make more sense to give all of those row-final cells the same name and then use a getElementsByName to scoop up all of them. You'd still have to apply a "name" attribute to each one individually in the HTML. But it would give you more flexibility about how many there are; you can make the table longer or shorter (is it something like a list of places?) without having to change anything in the javascript.

You may have noticed that we're coming up on a major US holiday. So I hope this is not a question that urgently needs to be answered within the next few days :)

[james_09]

No rush at all - Thank you for your help so far :)

My site currently has all the data tables live, with an explanation on how to adjust the times manually. It's just got to the point where I'm getting e-mails daily asking if I can add this function for ease of use.

It's a computer game site - certain activities take a set period of real time which is reduced by variable X. X is dependant on how far you have progressed through the game.

I'm reading up on some basic JavaScript guides, but not coming from a coding background, I am finding it a lot harder to get my head round than HTML and CSS.

[lucy24]

Quick follow-up: I experimented directly because I've never personally used "innerHTML" with names rather than ids and wasn't sure it's allowed. (The "name" attribute in javascript is most likely to occur in something like a group of radio buttons, where exactly one of the group can be checked.)

This works:

HTML

<table>
<tr>
<td>1</td><td>2</td><td name = "daytime">3</td>
</tr>
<tr>
<td>1</td><td>2</td><td name = "daytime">3</td>
</tr>
<tr>
<td>1</td><td>2</td><td name = "daytime">3</td>
</tr>
<tr>
<td>1</td><td>2</td><td name = "daytime">3</td>
</tr>
</table>

<p><span style = "padding: .5em; border: 1px solid" onclick = "readTable()">Make Table</span></p>

javascript:

function readTable()
 {
 var count, newvalue;
 var holder = document.getElementsByName("daytime");
 for (count = 0; count < holder.length; count++)
 {
 newvalue = parseInt(holder[count].innerHTML,10) + 1;
 holder[count].innerHTML = newvalue;
 }
 }

Keep clicking, and it keeps incrementing. I pasted in the entire code so you can try it for yourself.

When you experiment, you'll find that the exact length of your date/time string varies a little bit depending on what numbers are displayed. So make sure the table cell starts out wide enough to fit even the largest possible value, so you don't get a distracting shift in border lines. (You can see this in action if you keep clicking until the visible number jumps from 9 to 10. And again from 99 to 100, if your cat falls asleep on the keyboard.)

[james_09]

That's great - thanks for your help.

I have applied your script and the html button to one of my existing tables.

The final column is now correctly linked to the action of clicking the button and the whole of the final column in table updates from this action.

I will spend some time this week playing around with the formula e.t.c. and let you know how I get on.

James

[james_09]

Duplicate post