Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #18200 > unrolled thread

How to best update three columns

Back to article view | Back to comp.lang.javascript

Contents

  How to best update three columns "Tony" <tony.johansson@inport.com> - 2013-01-22 16:07 +0100
    Re: How to best update three columns "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-01-22 20:21 +0100
      Re: How to best update three columns "Tony" <tony.johansson@inport.com> - 2013-01-23 10:08 +0100
        Re: How to best update three columns "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-01-23 11:26 +0100
      Re: How to best update three columns Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-01-23 18:54 +0000
        Re: How to best update three columns "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-01-24 10:01 +0100
    Re: How to best update three columns Bart Van der Donck <bart@nijlen.com> - 2013-01-23 01:11 -0800

#18200 — How to best update three columns

I have three arrrays with values for columns TextValue, MeasureType and 
Time.
Each index in the arrray correspond always to the index in table so 
TextValue[0] correspond to the first row and column 3 which is TextValue
I want to loop through the table and update each column in the table with 
values from the corresponing three arrays.
How can that be done ?
In this example I have some dymmy values for columns  TextValue, MeasureType 
and Time


<table id="vivaGrid">
         <thead>
         <tr>
        <th>Place</th>
        <th>MeasureType</th>
        <th>TextValue</th>
            <th>Tendancy</th>
            <th>Time</th>
            </tr>
            </thead>

         <tbody>
         <tr>
            <td id="r1c1">Dalbobron</td>
            <td id="r1c2">Medelvind</td>
            <td id="r1c3">0.5m/s</td>
            <td id="r1c4"></td>
            <td id="r1c5">2012-12-16 10:47</td>
         </tr>

         <tr>
            <td id="r2c1">Dalbobron</td>
            <td id="r2c2">By vind</td>
            <td id="r2c3">1.3</td>
            <td id="r2c4">Minskande</td>
            <td id="r2c5">2012-12-16 10:47</td>
         </tr>

         <tr>
            <td id="r3c1">Dalbobron</td>
            <td id="r3c2">Riktning</td>
            <td id="r3c3">248</td>
            <td id="r3c4">Ökande</td>
            <td id="r3c5">2012-12-16 10:47</td>
         </tr>

         <tr>
            <td id="r4c1">Dalbobron</td>
            <td id="r4c2">Vattenstånd</td>
            <td id="r4c3">106</td>
            <td id="r4c4">Minskande</td>
            <td id="r4c5">2012-12-16 10:47</td>
         </tr>

         <tr>
            <td id="r5c1">Vargön</td>
            <td id="r5c2">Vattenflöde</td>
            <td id="r5c3">918.6</td>
            <td id="r5c4"></td>
            <td id="r5c5">2012-12-16 10:47</td>
         </tr>

         <tr>
            <td id="r6c1">Brinke.Övre</td>
            <td id="r6c2">Vattenstånd</td>
            <td id="r6c3">108</td>
            <td id="r6c4">Minskande</td>
            <td id="r6c5">2012-12-16 10:47</td>
         </tr>

         <tr>
            <td id="r7c1">Stallbacksbron</td>
            <td id="r7c2">Sikt</td>
            <td id="r7c3">>2000</td>
            <td id="r7c4"></td>
            <td id="r7c5">2012-12-16 10:47</td>
         </tr>

         <tr>
            <td id="r8c1">Trollhättan</td>
            <td id="r8c2">Vattenflöde</td>
            <td id="r8c3">927</td>
            <td id="r8c4"></td>
            <td id="r8c5">2012-12-16 10:47</td>
         </tr>

         <tr>
            <td id="r9c1">Åkerström</td>
            <td id="r9c2">Sikt</td>
            <td id="r9c3">>2000</td>
            <td id="r9c4"2012-12-16 10:47></td>
            <td id="r9c5"></td>
         </tr>

         <tr>
            <td id="r10c1">Lilla Edet Övre</td>
            <td id="r10c2">Vattenstånd</td>
            <td id="r10c3">-2</td>
            <td id="r10c4"></td>
            <td id="r10c5">2012-12-16 10:47</td>
         </tr>

         <tr>
            <td id="r11c1">Göta</td>
            <td id="r11c2">Sikt</td>
            <td id="r11c3">>2000</td>
            <td id="r11c4"></td>
            <td id="r11c5">2012-12-16 10:47</td>
         </tr>

         <tr>
            <td id="r12c1">Alvänge</td>
            <td id="r12c2">Sikt</td>
            <td id="r12c3">>2000</td>
            <td id="r12c4"></td>
            <td id="r12c5"></td>
         </tr>
         </tbody>
    </table>

//Tony 

[toc] | [next] | [standalone]

#18209

Tony wrote on 22 jan 2013 in comp.lang.javascript:

> How to best update three columns

The Q for the "best" way is nonsensical in programming,
as there is nothing more variable than taste.

> I have three arrrays with values for columns TextValue, MeasureType
> and Time.
> Each index in the arrray correspond always to the index in table so 
> TextValue[0] correspond to the first row and column 3 which is
> TextValue I want to loop through the table and update each column in
> the table with values from the corresponing three arrays.
> How can that be done ?

Why not show wat you allready tried first? That is usance here,
as it shows you are not just dodging payment of a programmer.

==============================

No need for all the id='..', they are error-prone.

Start counting at 0, not at 1, 
stipulate this is the first table of the page, 
using it's first tbody of that table,
and using an array of arrays,
try this:

var arr = [
          ['...','...','...'],

          ['...','...','...'],

          ['...','...','...'],

          ['...','...','...']
          ];

var rtop = arr.length - 1;
var ctop = arr[0].length - 1;

var t = document.getElementsByTagName('table')[0];
var tb = t.getElementsByTagName('tbody')[0];

for (var r = 0; r < rtop; r++)
  for (var c = 0; c < ctop; c++)
    tb.rows[r].cells[c].innerHTML = arr[r][c];

===================

not tested, too lazy.

You could do all kinds of sorting on the outer array,
by order of one of the inner arrays' elements,
while keeping the inner arrays intact.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#18217

I mentioned before that we had three arrrays containing the columns 
TextValue, MeasureType
and Time.
As matter of fact we haven't decided yet how the data structure we receive 
from server should look like.

So I ask here what would be the best and easiest data structure to use if I 
want to update the table I asked in the first mail ?
Assume also that we can send all the data in all five columns.
I have worked with ASP.NET  where we use binding but it's not possible here 
when I use xhtml and javascript


//Tony


"Evertjan."  wrote in message news:XnsA150CF1952965eejj99@194.109.133.133...

Tony wrote on 22 jan 2013 in comp.lang.javascript:

> How to best update three columns

The Q for the "best" way is nonsensical in programming,
as there is nothing more variable than taste.

> I have three arrrays with values for columns TextValue, MeasureType
> and Time.
> Each index in the arrray correspond always to the index in table so
> TextValue[0] correspond to the first row and column 3 which is
> TextValue I want to loop through the table and update each column in
> the table with values from the corresponing three arrays.
> How can that be done ?

Why not show wat you allready tried first? That is usance here,
as it shows you are not just dodging payment of a programmer.

==============================

No need for all the id='..', they are error-prone.

Start counting at 0, not at 1,
stipulate this is the first table of the page,
using it's first tbody of that table,
and using an array of arrays,
try this:

var arr = [
          ['...','...','...'],

          ['...','...','...'],

          ['...','...','...'],

          ['...','...','...']
          ];

var rtop = arr.length - 1;
var ctop = arr[0].length - 1;

var t = document.getElementsByTagName('table')[0];
var tb = t.getElementsByTagName('tbody')[0];

for (var r = 0; r < rtop; r++)
  for (var c = 0; c < ctop; c++)
    tb.rows[r].cells[c].innerHTML = arr[r][c];

===================

not tested, too lazy.

You could do all kinds of sorting on the outer array,
by order of one of the inner arrays' elements,
while keeping the inner arrays intact.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress) 

[toc] | [prev] | [next] | [standalone]

#18219

Tony wrote on 23 jan 2013 in comp.lang.javascript:

> So I ask here what would be the best and easiest data structure to use
> if I want to update the table I asked in the first mail ?

1
Please stop asking for "the best way", that being nonsense.
There is only a "best way" in the eyes of an individual programmer.
I gave you the easiest structure and function IMHO.

2
Usenet and this NG not being a helpdesk, your exact specification working 
on the specified table does not mean anything. We will respond as we 
please. In my response I wanted to teach you insight in Javascript and DOM.
If you try to restrict the responses to tour specifications please do not 
use usenet and this NG.

> I have worked with ASP.NET  where we use binding but it's not possible
> here when I use xhtml and javascript

There is no need for xhtml, it only confuses the issue for a beginner like 
you. Use just HTML, Javascript and the DOM. [and CSS]

Or use your favorite serverside code and refresh the whole page. Classic 
ASP indulges the use of Javascript code, so is on topic here, but ofcourse 
serverside code has no direct access to the DOM.



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#18228

In comp.lang.javascript message <XnsA150CF1952965eejj99@194.109.133.133>
, Tue, 22 Jan 2013 20:21:31, Evertjan. <exxjxw.hannivoort@inter.nl.net>
posted:

>
>var t = document.getElementsByTagName('table')[0];
>var tb = t.getElementsByTagName('tbody')[0];
>

I think it generally better to use something other than a numerical
index to identify the whole Table, in case the number or order of Tables
is changed.  Use a name or ID instead, on the Table or on some bordering
element.

Tony - I guess you are Swedish, or at least in Sweden; and that the
Table may be a tide- or time- table.  In either case, "Tendancy" should
be "Tendency"; and "Trend" might (or might not) be better.

-- 
 (c) John Stockton, nr London UK               Reply address via Home Page.
   news:comp.lang.javascript FAQ <http://www.jibbering.com/faq/index.html>.
   <http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
   <http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[toc] | [prev] | [next] | [standalone]

#18237

Dr J R Stockton wrote on 23 jan 2013 in comp.lang.javascript:

> In comp.lang.javascript message <XnsA150CF1952965eejj99@194.109.133.133>
> , Tue, 22 Jan 2013 20:21:31, Evertjan. <exxjxw.hannivoort@inter.nl.net>
> posted:
> 
>>
>>var t = document.getElementsByTagName('table')[0];
>>var tb = t.getElementsByTagName('tbody')[0];
>>
> 
> I think it generally better to use something other than a numerical
> index to identify the whole Table, in case the number or order of Tables
> is changed.  Use a name or ID instead, on the Table or on some bordering
> element.

Indeed, however in examples, the number is an exellent way to show general 
principles without including unrelated names or id's, and the only simple 
way to identify an unnamed [mostly single] tbody.

In small pages, where you are confident there is only one table

var t = document.getElementsByTagName('table')[0];

is very usable, as you can copy, link or serverside include this piece of 
clientside code witout alteration.

Also it is just as unsafe as other generalisations, like:

<style type='text/css'>
table thead {display:none;}
</style>


> Tony - I guess you are Swedish, or at least in Sweden; and that the
> Table may be a tide- or time- table.  In either case, "Tendancy" should
> be "Tendency"; and "Trend" might (or might not) be better.

John, your tendency to react on in the subtilities of British-English is 
not a trend, as it is an enjoyable constant factor of your postings. 

=============

In [at least in medical] scientific literture there seems to be a 
tendency, perhaps even a trendy upward trend, to write this nonsense:

"It is not statistically significant, but a trend is visible ..."

as if trends are exempted from the requirement of statistical significance 
to be "visible" in scientific literture.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#18218

Tony wrote:

> I have three arrrays with values for columns TextValue, 
> MeasureType and Time.
> 
> Each index in the arrray correspond always to the index 
> in table so TextValue[0] correspond to the first row and 
> column 3 which is TextValue
> 
> I want to loop through the table and update each column 
> in the table with values from the corresponing three 
> arrays.
> 
> How can that be done ?
> In this example I have some dymmy values for columns
> TextValue, MeasureType and Time

[ skip long table ]

I think you're looking for 'innerHTML':

  document.getElementById('r1c1').innerHTML = 'new_value';

Evertjan gave you the row/cell-walking approach, here is the version on ID:

<script type="text/javascript">

 var MeasureTypes = new Array('m1','m2','m3','m4','m5','m6',
                              'm7','m8','m9','m10','m11','m12');

 var TextValues   = new Array('t1','t2','t3','t4','t5','t6',
                              't7','t8','t9','t10','t11','t12');

 var Times        = new Array('i1','i2','i3','i4','i5','i6',
                              'i7','i8','i9','i10','i11','i12');

 for (var j=1; j <= 12; ++j)  {
   document.getElementById('r'+j+'c2').innerHTML = MeasureTypes[j-1];
   document.getElementById('r'+j+'c3').innerHTML = TextValues[j-1];
   document.getElementById('r'+j+'c5').innerHTML = Times[j-1];
 }

</script>

Hope this helps,

-- 
 Bart

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web