Table / field data change via JavaScript

@the_bowmanJan 10.2005

Hi Everybody!
First of all I wish you all a great start for the new year; thank you a lot for the previous help you gave me; now I am searching a smart way to change the data inside a table with a select.

Example:
I have 3 tables (same nr of rows and columns), the tables refer to 3 different type of products (families), each family is composed by different products ID and tech specification:

Family 1:
– 6 columns, product ID
– 10 rows, tech spec (width, color, technology, etc)

Family 2:
– 5 columns + (1 blank), product ID
– 10 rows, tech spec (same as the family 1, but different data)

Family 3:
– 6 columns, product ID
– 9 rows + 1 blank, tech spec (same as the family 2, but different date and without color spec).

It is a JavaScript that help my to manage a “filter” on rows and columns?

How can I use a select (with the family options) to change the data inside the table?
How can I use a select (with the spec options) to change the data inside the table?

Thank you all for your kind attention!

to post a comment

JavaScript

7 Comments(s) _↴

@EwokJan 10.2005 — #To Place Text into Cell use this:

document.getElementById('TableName').rows[numberInArray].cells [numberInArray].innerHTML="Text to placed in cell";

@the_bowmanauthorJan 11.2005 — #Thank you for your fast reply, I applied your solution and it works, but only with IE 4.0 or earlier.

I will try with somethings like: each select option of the menu calls a different table, but I do not know a "method" to show & hide tables, do you know something usefull?

Have a nice day

@KorJan 11.2005 — #
but only with IE 4.0 or earlier.
[/quote]

You may try DOM methods:

[code=php]
 var allRows = document.getElementById('TableName').getElementsByTagName('tr')
 //the rows collection
 var oCell = allRows[index].getElementsByTagName('td')[index];//the cell
 var oText = document.createTextNode('Text to placed in cell');//create textNode
 oCell.appendChild(oText);//append text node to the cell
 [/code]

For multiple operations, use a [b]for[/b] loop.

@the_bowmanauthorJan 11.2005 — #[i]Originally posted by Kor [/i]

[B]You may try DOM methods:

Thank you Kor!

Your solution works, but I am self made JavaScript "developer" and I know only few basic about this language, so I am facing some problems linking your solution to a select option.

What do you think about a sort of:

<head>

<script language="JavaScript">

var selected_value = document.formname.selectname.value;

if (selected_value = "0"){

document.write ("<table id="table00">");

}

if (selected_value ="1"){

document.write ("<table id="table01">");

}

// and so on with all the selectable values

</script>

</head>

Now I am facing some problems with the show / hide function for the tables, because I am placing the tables in the <body> section, haw can I store all the tables in my page and permit to the users to see only at the selected table?

Thank you for your attention.

the_bowman

@KorJan 11.2005 — #u wana change the id of a table, or u wanna create a new table with an id according to a certain passed value?

@the_bowmanauthorJan 11.2005 — #[i]Originally posted by Kor [/i]

[B]u wana change the id of a table, or u wanna create a new table with an id according to a certain passed value? [/B][/QUOTE]

Hi Kor!

I would be able to show a table; I am managing 3 different tables (same rows-columns name, but different data), by selecting an option with a select menu, the user have to take a look at the selected data.

Example:

if I have a point on a 3D graph, I can look at the point in 4 different ways:

1. with x, y, z coordinates

2. with x coordinates

3. with y coordinates

4. with z coordinates

So my select is made by the values (x-y-z; x; y; z), and the table is made by a "sensible" field (coordinates), by selecting different point of view, I would be able to show only the selected data.

I hope that it is clear, sorry for my english.

the_bowman

@the_bowmanauthorJan 11.2005 — #Hi masters of the JavaScripts,

with my own hands I "developed" thi kind of code junk:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Dynamic page</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript" type="text/javascript">

function fnCambio(){

var selezione = document.tab_dyn.fam.value;

if (selezione == "1"){

document.write ('<table id="02" width="200" border="1"><tr><td>ciao!</td></tr></table>');

}

if (selezione == "2"){

document.write ('<table id="02" width="200" border="1"> <tr> <td>hello!</td> </tr> </table>');

}

if (selezione == "3"){

document.write ('<table id="02" width="200" border="1"> <tr> <td>halo!</td> </tr> </table>');

}

}

</script>

</head>

<body>

<form name="tab_dyn" id="tab_dyn">

<select name="fam" id="famiglia">

<option value="1" selected>Famiglia 1</option>

<option value="2">Famiglia 2</option>

<option value="3">Famiglia 3</option>

</select>

<table>

<tr>

<td>Intestazione</td>

</tr>

</table>

</form>

<script language="JavaScript">

fnCambio();

</script>

</body>

</html>

Now I am facing a problem concerning the page refresh, the values change only if I refresh the page in the browser, I checked the solution with a OnChange event linked to the select, but the page discard all the <table> before the final <script>.

Thank you for your help!

Also in #JavaScript _↴

Make div/ Iframe full-screen/ revert to original size i.e. like YouTube videos Make everything visible in one click?drop down list get value problem....

Success!

Help @the_bowman spread the word by sharing this article on Twitter...

Tweet This

Table / field data change via JavaScript

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Table / field data change via JavaScript

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴