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


Groups > comp.lang.javascript > #33734

Re: Tough problem

Newsgroups comp.lang.javascript
Date 2017-08-09 11:02 -0700
References <1e65472b-7816-40fd-9399-370128589a47@googlegroups.com> <1kehis9pjd2y7.1k1lhmq3nt8fl.dlg@40tude.net>
Message-ID <3862f987-e3a6-4edd-b14a-9b757bc9f031@googlegroups.com> (permalink)
Subject Re: Tough problem
From justaguy <lichunshen84@gmail.com>

Show all headers | View raw


On Wednesday, August 9, 2017 at 12:13:55 PM UTC-4, JJ wrote:
> On Mon, 7 Aug 2017 19:00:33 -0700 (PDT), justaguy wrote:
> > In the following BIG form (tons of FORM elements), function event trigger
> > is the button with + sign beneath each group.
> > http://54.80.71.115/dev/bigFORM.html 
> > 
> > Under J1 and J11 pair (of groups), if we click on the outmost + sign it
> > would duplicate with J1 and J11, and if we just click on the + sign
> > beneath J11 it would duplicate just J11. 
> > 
> > Currently, all the names of the J11 elments start with a prefix of "J11_"
> > and each element is an array.  What I'd like to do is, for each J1 I'd
> > like to consider it as a "row" and I attempted to insert "row1", "row2"
> > etc. upon each J1 addition.  Then, I also need to know how many J11 is in
> > each J1.
> 
> If the J11 sections must be part of the J1 section, then their HTML elements
> should be placed hierarchically and treated as hierarchy, rather than as
> flat list.
> 
> Consider below layout.
> 
>   <div id="J_Container">
>     <div class="J1_Section">
>       <table class="J1_Fields">
>         <!-- put J1 fields here -->
>       </table>
>       <div class="J1_Controls">
>         <!-- put J1 buttons here -->
>       </div>
>       <div class="J11_Section">
>         <table class="J11_Fields">
>           <!-- put J11 fields here -->
>         </table>
>         <div class="J11_Controls">
>           <!-- put J11 buttons here -->
>         </div>
>       </div>
>     </div>
>   </div>
> 
> When the J1 "+" button is pressed, it should clone its own "J1_Section" and
> append/insert the clone onto "J_Container". So, the clone will clone itself
> (J1) and its J11 sections including the J1 and J11 buttons. You'll need to
> reinitialize the cloned node if you need it to have blank fields and only
> one J1 section, before appending it onto "J_Container".
> 
> When the J11 "+" button is pressed, it should clone its own "J11_Section"
> and append/insert the clone onto "J1_Section". Like above, it'll clone
> itself including the J11 buttons.
> 
> Use `getElementsByClassName()` or `querySelectorAll()` to retrieve the
> sections. e.g.
> 
>   var J1Sections = document.getElementsByClassname("J1_Section");
>   var J1First = J1Sections[0];
>   var J1First_J11Sections = J1First.getElementsByClassname("J11_Section");
>   var J1First_J11First = J1First_J11Sections[0];

Very helpful.  Revised as suggested.  But why for   
console.log('J1Sections length',J1Sections.length, 'J11Sections length:',J1First_J11Sections.length);

J1Sections.length returns 1 instead of 2 when a new Section is added
same is true for J1First_J11Sections.length

Thanks.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread


Thread

Tough problem justaguy <lichunshen84@gmail.com> - 2017-08-07 19:00 -0700
  Re: Tough problem JJ <jj4public@vfemail.net> - 2017-08-09 23:13 +0700
    Re: Tough problem justaguy <lichunshen84@gmail.com> - 2017-08-09 11:02 -0700
      Re: Tough problem justaguy <lichunshen84@gmail.com> - 2017-08-09 11:22 -0700
        Re: Tough problem justaguy <lichunshen84@gmail.com> - 2017-08-09 12:00 -0700
    Re: Tough problem Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-08-09 23:13 +0200
    Re: Tough problem justaguy <lichunshen84@gmail.com> - 2017-08-09 16:46 -0700

csiph-web