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

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

Duplicating the last row of a Table

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

Contents

  Duplicating the last row of a Table Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> - 2014-01-17 21:44 +0000
    Re: Duplicating the last row of a Table Zlatko Duric <zladuric@gmail.com> - 2014-01-18 01:52 +0100
      Re: Duplicating the last row of a Table Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-18 12:53 +0100
        Re: Duplicating the last row of a Table RobG <rgqld@iinet.net.au> - 2014-01-19 17:00 +1000
          Re: Duplicating the last row of a Table Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-19 14:41 +0100
    Re: Duplicating the last row of a Table "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-18 12:16 +0100
      Re: Duplicating the last row of a Table Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> - 2014-01-19 17:00 +0000
    Re: Duplicating the last row of a Table Danny <dann90038@gmail.com> - 2014-01-18 11:32 -0800

#22661 — Duplicating the last row of a Table

I wish to duplicate the last row of a Table, which contains cells like
<td>text</td> and <td><input type=text ...></td>, with a view to then
replacing the input elements with test representing their values (which
seems easy).


In HTML, I have something like

        <table>         <!-- abbreviated -->
        <tbody ID=TB>
        <tr><td><input type=text ...></td><td>AA</td></tr>
        <tr><td><input type=text ...></td><td>BB</td></tr>
        </tbody>
        </table>
        <input type=button onclick="Klone()">

and JavaScript

        var Rose = document.getElementById("TB").rows

        function Klone() {
          var node = Rose.item(Rose.length-1)
          var newnode = node.cloneNode(true);
          Rose.appendChild(newnode);
          }

which, in Firefox, produces
"TypeError: Rose.appendChild is not a function".

        It may help some if I remark that this line works :-
                Cel = Rose.item(Y).cells.item(X)

What should the code be, to work in current Firefox and other common
browsers?

        And, if anyone knows the cost, power consumption, life, and
        lumens output of a type of readily-available LED lamp that plugs
        directly into the sort of socket that commonly dangles from
        local domestic ceilings, that can be entered in the Table.
        Lumens should be in or near the range 500 to 1000.

-- 
 (c) John Stockton, nr London, UK.  For Mail, see Home Page.  Turnpike, WinXP.
 Web  <http://www.merlyn.demon.co.uk/> - FAQ-type topics, acronyms, and links.
 Command-prompt MiniTrue is useful for viewing/searching/altering files. Free,
 DOS/Win/UNIX now 2.0.6;  see my <http://www.merlyn.demon.co.uk/pc-links.htm>.

[toc] | [next] | [standalone]

#22662

That's a good behavior, because with the first quoted statement you're 
not getting a tbody element. You're getting its rows, and an array has 
no method appendChild (by default).

On 01/17/2014 10:44 PM, Dr J R Stockton wrote:

 > var Rose = document.getElementById("TB").rows

[cut]

 > Rose.appendChild(newnode);

[cut]

 > Cel = Rose.item(Y).cells.item(X)


So, you can do something like this to get the tbody:

     var tb = document.getElementById('tb');

and then use that in further code and append a row to tb.

You get rows with something like document.getElementById('table-id').rows.

-- 
Zlatko

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

#22667

Zlatko Duric wrote:

> That's a good behavior,

*What* is good behavior?  Please do not top-post.

<http://PointedEars.de/faq#posting>

> because with the first quoted statement you're not getting a tbody
> element. You're getting its rows, and an array has no method appendChild
> (by default).

The object does not have an appendChild() method by default, indeed.
But that is _not_ due its being an Array; it is due to its _implementing
the HTMLCollection interface_.

<http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-64060425>
<http://www.w3.org/TR/2013/CR-html5-20130806/tabular-data.html#the-table-element>

> On 01/17/2014 10:44 PM, Dr J R Stockton wrote:
> 
>  > var Rose = document.getElementById("TB").rows
> 
> [cut]
> 
>  > Rose.appendChild(newnode);
> 
> [cut]
> 
>  > Cel = Rose.item(Y).cells.item(X)

  Cel = Rose[Y].cells[X];

suffices.  But this is not Pascal; variable identifiers that do not stand 
for constructors or constant-like values should start lowercase.

> So, you can do something like this to get the tbody:
> 
>      var tb = document.getElementById('tb');

  var tb = document.getElementById('TB');

Another possibility is to use table.tBodies[index].

> and then use that in further code and append a row to tb.

It was asked for *duplicating* the last row of a table, and that is easily 
done:

  var rows = table.rows;
  var last_row = rows[rows.length - 1];
  last_row.parentNode.appendChild(last_row.cloneNode(true));

or

  last_row.parentNode.insertBefore(last_row.cloneNode(true), null);

I am using “last_row.parentNode” instead of “table” because the parent node 
may be a “tbody” element node.  [Cloning is vital because otherwise the 
original row is moved to the end of the table or table section (you can use 
that behavior to sort table rows quickly).]
 
> You get rows with something like document.getElementById('table-id').rows.

That accesses the NodeList of rows of the table, not of a table body, 
though.  Note that at least Chromium WebKit sorts the rows of the table in 
*display* order; i.e., the rows for the table footer (“tfoot” element) come 
last even though the corresponding “tr” elements do not.  When in doubt, 
access the rows of the table sections instead.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#22710

On 18/01/2014 9:53 pm, Thomas 'PointedEars' Lahn wrote:
> I am using “last_row.parentNode” instead of “table” because the parent node
> may be a “tbody” element node.

That is a very good idea, since the parent of a TR must be a table 
section element, not a table.

Many browsers allow the use of a table element as if it was a table 
section (e.g. appending a row to a table will add it to the last TBODY 
element), though many versions of IE do not (the row must be explicitly 
added to a TBODY, THEAD or TFOOT).


-- 
Rob

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

#22713

RobG wrote:

> On 18/01/2014 9:53 pm, Thomas 'PointedEars' Lahn wrote:
>> I am using “last_row.parentNode” instead of “table” because the parent
>> node may be a “tbody” element node.
> 
> That is a very good idea, since the parent of a TR must be a table
> section element, not a table.
>
> Many browsers allow the use of a table element as if it was a table
> section

How did you get these ideas?

> ([…] appending a row to a table will add it to the last TBODY
> element), though many versions of IE do not (the row must be explicitly
> added to a TBODY, THEAD or TFOOT).

I can confirm this for table.appendChild() vs. tableSection.appendChild() 
and

  - a table with explicit “thead”, “tfoot”, and “tbody” elements in the
    markup (the features table of the ECMAScript Support Matrix [1]), and

  - a dynamically created table (a “tbody” element had to be appended as
    its child explicitly, and the row added to *that*, to be displayed)

in IE 6.0.2800.1106 on Wine XP.  It should not apply for other ways to add 
table rows, and not for any version that supports HTML5.

_________
[1] <http://PointedEars.de/es-matrix#features>
-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#22666

Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> wrote on 17 jan 2014 
in comp.lang.javascript:

> I wish to duplicate the last row of a Table, which contains cells like
> <td>text</td> and <td><input type=text ...></td>, with a view to then
> replacing the input elements with test representing their values (which
> seems easy).
> 
> 
> In HTML, I have something like
> 
>         <table>         <!-- abbreviated -->
>         <tbody ID=TB>
>         <tr><td><input type=text ...></td><td>AA</td></tr>
>         <tr><td><input type=text ...></td><td>BB</td></tr>
>         </tbody>
>         </table>
>         <input type=button onclick="Klone()">
> 
> and JavaScript
> 
>         var Rose = document.getElementById("TB").rows
> 
>         function Klone() {
>           var node = Rose.item(Rose.length-1)
>           var newnode = node.cloneNode(true);
>           Rose.appendChild(newnode);

You cannot do that, Rose is a collection, 
you cannot appendChild() to a collection.

Chrome console will tell you this explicitly.

>           }
> 
> which, in Firefox, produces
> "TypeError: Rose.appendChild is not a function".
> 
>         It may help some if I remark that this line works :-
>                 Cel = Rose.item(Y).cells.item(X)
> 
> What should the code be, to work in current Firefox and other common
> browsers?

 function Klone() {
          var node = Rose.item(Rose.length-1);
          var newnode = node.cloneNode(true);
          node.parentNode.appendChild(newnode);
 };

You can test this with dirty outerHTML:

 function Klone() {
          var node = Rose.item(Rose.length-1);
          alert(node.parentNode.outerHTML);
          alert(node.outerHTML);
          var newnode = node.cloneNode(true);
          node.parentNode.appendChild(newnode);
          alert(node.parentNode.outerHTML);
 };

[not tested on Firefox, only on Chrome.]

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

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

#22715

In comp.lang.javascript message <XnsA2B97CDBE63E3eejj99@194.109.133.133>
, Sat, 18 Jan 2014 12:16:26, Evertjan. <exxjxw.hannivoort@inter.nl.net>
posted:

>Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> wrote on 17 jan 2014
>in comp.lang.javascript:
>
>> I wish to duplicate the last row of a Table, which contains cells like
>> <td>text</td> and <td><input type=text ...></td>, with a view to then
>> replacing the input elements with test representing their values (which
>> seems easy).
>>
>>
>> In HTML, I have something like
>>
>>         <table>         <!-- abbreviated -->
>>         <tbody ID=TB>
>>         <tr><td><input type=text ...></td><td>AA</td></tr>
>>         <tr><td><input type=text ...></td><td>BB</td></tr>
>>         </tbody>
>>         </table>
>>         <input type=button onclick="Klone()">
>>
>> and JavaScript
>>
>>         var Rose = document.getElementById("TB").rows
>>
>>         function Klone() {
>>           var node = Rose.item(Rose.length-1)
>>           var newnode = node.cloneNode(true);
>>           Rose.appendChild(newnode);
>
>You cannot do that, Rose is a collection,
>you cannot appendChild() to a collection.

I should have remembered which "educational" site I took that from ...

>Chrome console will tell you this explicitly.
>
>>           }
>>
>> which, in Firefox, produces
>> "TypeError: Rose.appendChild is not a function".
>>
>>         It may help some if I remark that this line works :-
>>                 Cel = Rose.item(Y).cells.item(X)
>>
>> What should the code be, to work in current Firefox and other common
>> browsers?
>
> function Klone() {
>          var node = Rose.item(Rose.length-1);
>          var newnode = node.cloneNode(true);
>          node.parentNode.appendChild(newnode);
> };


Typical EjH code : it works.  And with
          node.cells.item(1).innerHTML = "@@@@@"
at the end of Klone, one of the cells is overwritten.  Overwriting with
what I actually want should be easy enough ... it was.  Tested in
Firefox 26.0, Opera 12.16, Safari 5.1.7, IE8, in Win XP sp3.

Thanks.

-- 
 (c) John Stockton, nr London, UK.   E-mail, see Home Page.    Turnpike v6.05.
 Website  <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
 PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
 Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

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

#22701

To Dr J R Stockton

make sure the global variable, gets assigned "after" the object has been parsed
notice the js would be above and the <body> and all its children after that
thus window.onload to wait for <body> to be parsed, so the object passed is there by then
---> http://www.webdevout.net/test?08H&raw

[toc] | [prev] | [standalone]

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

csiph-web