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

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

Cloning a table and not allowing click anywhere to trigger this event

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

Contents

  Cloning a table and not allowing click anywhere to trigger this event justaguy <lichunshen84@gmail.com> - 2017-08-02 13:53 -0700
    Re: Cloning a table and not allowing click anywhere to trigger this event justaguy <lichunshen84@gmail.com> - 2017-08-02 15:45 -0700
      Re: Cloning a table and not allowing click anywhere to trigger this event justaguy <lichunshen84@gmail.com> - 2017-08-02 21:29 -0700
        Re: Cloning a table and not allowing click anywhere to trigger this event "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-08-03 11:27 +0200
          Re: Cloning a table and not allowing click anywhere to trigger this event justaguy <lichunshen84@gmail.com> - 2017-08-03 11:34 -0700
            Re: Cloning a table and not allowing click anywhere to trigger this event justaguy <lichunshen84@gmail.com> - 2017-08-04 12:50 -0700
              Re: Cloning a table and not allowing click anywhere to trigger this event justaguy <lichunshen84@gmail.com> - 2017-08-04 14:00 -0700
          Re: Cloning a table and not allowing click anywhere to trigger this event justaguy <lichunshen84@gmail.com> - 2017-08-04 19:06 -0700
            Re: Cloning a table and not allowing click anywhere to trigger this event "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-08-05 10:38 +0200
    Re: Cloning a table and not allowing click anywhere to trigger this event JR <jrfaqcom@gmail.com> - 2017-08-05 13:07 -0300

#33682 — Cloning a table and not allowing click anywhere to trigger this event

Hi,

One can click on the following table to clone it but the trouble is one can also click anywhere inside the table to create another clone and that's not desirable.  So, the question is, how can we put the "Add" or similar button or text to inform a user to click to make a copy of this table and not allowing the event to be triggered by clicking on just any spot inside the table?

Thanks.


<table id="A1" onclick="var newNode = this.cloneNode(true); this.appendChild(newNode);" caption="Add">	
<tr>	
	<td>	
	Code (A1) <input type="checkbox" id="A1check" name="A1check" value=1> 
	<input type="button" value="add">
	
	</td>
</tr>
<tr>	
	<td>
	A <B>legal instrument</B> to secure an indebtedness in the amount shown below, and any other obligations secured thereby</td>
</tr>	
<tr>
	<td>
	Amount: <input type="text" name="A1Amount[]">
	</td>
</tr>	
<tr>
	<td>
	Dated: <input type="text" name="A1Date[]" class="gdate">
	</td>
</tr>		
</table>		

[toc] | [next] | [standalone]

#33683

On Wednesday, August 2, 2017 at 4:53:32 PM UTC-4, justaguy wrote:
> Hi,
> 
> One can click on the following table to clone it but the trouble is one can also click anywhere inside the table to create another clone and that's not desirable.  So, the question is, how can we put the "Add" or similar button or text to inform a user to click to make a copy of this table and not allowing the event to be triggered by clicking on just any spot inside the table?
> 
> Thanks.
> 
> 
> <table id="A1" onclick="var newNode = this.cloneNode(true); this.appendChild(newNode);" caption="Add">	
> <tr>	
> 	<td>	
> 	Code (A1) <input type="checkbox" id="A1check" name="A1check" value=1> 
> 	<input type="button" value="add">
> 	
> 	</td>
> </tr>
> <tr>	
> 	<td>
> 	A <B>legal instrument</B> to secure an indebtedness in the amount shown below, and any other obligations secured thereby</td>
> </tr>	
> <tr>
> 	<td>
> 	Amount: <input type="text" name="A1Amount[]">
> 	</td>
> </tr>	
> <tr>
> 	<td>
> 	Dated: <input type="text" name="A1Date[]" class="gdate">
> 	</td>
> </tr>		
> </table>

Never mind, solved.  append any new child to a fake div below it, that's it.

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

#33684

On Wednesday, August 2, 2017 at 6:45:34 PM UTC-4, justaguy wrote:
> On Wednesday, August 2, 2017 at 4:53:32 PM UTC-4, justaguy wrote:
> > Hi,
> > 
> > One can click on the following table to clone it but the trouble is one can also click anywhere inside the table to create another clone and that's not desirable.  So, the question is, how can we put the "Add" or similar button or text to inform a user to click to make a copy of this table and not allowing the event to be triggered by clicking on just any spot inside the table?
> > 
> > Thanks.
> > 
> > 
> > <table id="A1" onclick="var newNode = this.cloneNode(true); this.appendChild(newNode);" caption="Add">	
> > <tr>	
> > 	<td>	
> > 	Code (A1) <input type="checkbox" id="A1check" name="A1check" value=1> 
> > 	<input type="button" value="add">
> > 	
> > 	</td>
> > </tr>
> > <tr>	
> > 	<td>
> > 	A <B>legal instrument</B> to secure an indebtedness in the amount shown below, and any other obligations secured thereby</td>
> > </tr>	
> > <tr>
> > 	<td>
> > 	Amount: <input type="text" name="A1Amount[]">
> > 	</td>
> > </tr>	
> > <tr>
> > 	<td>
> > 	Dated: <input type="text" name="A1Date[]" class="gdate">
> > 	</td>
> > </tr>		
> > </table>
> 
> Never mind, solved.  append any new child to a fake div below it, that's it.

But it would be good to know if we have a way to copy elements structure only instead of default elements and their respective values.

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

#33685

justaguy <lichunshen84@gmail.com> wrote on 03 Aug 2017 in
comp.lang.javascript: 

>> > </table>
>> 
>> Never mind, solved.  append any new child to a fake div below it,
>> that's it.

"Fake" is so very Trumpian!

What about:

<script type='text/javascript'> 
'use strict';
function duplicateAfter(t) {
  t.insertAdjacentElement('afterend',t.cloneNode(true));
};
</script>

<table onclick='duplicateAfter(this);'>
<tr><td>Blah
</table>

Warning: any id will be illegally duplicated too!

> But it would be good to know if we have a way to copy elements structure
> only instead of default elements and their respective values.

Elements have content, do you mean that? 

You would have to insert the new content anyway,
so replacing content would do fine.

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

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

#33686

On Thursday, August 3, 2017 at 5:27:49 AM UTC-4, Evertjan. wrote:
> justaguy  wrote on 03 Aug 2017 in
> comp.lang.javascript: 
> 
> >> > </table>
> >> 
> >> Never mind, solved.  append any new child to a fake div below it,
> >> that's it.
> 
> "Fake" is so very Trumpian!
> 
> What about:
> 
> <script type='text/javascript'> 
> 'use strict';
> function duplicateAfter(t) {
>   t.insertAdjacentElement('afterend',t.cloneNode(true));
> };
> </script>
> 
> <table onclick='duplicateAfter(this);'>
> <tr><td>Blah
> </table>
> 
> Warning: any id will be illegally duplicated too!
> 
> > But it would be good to know if we have a way to copy elements structure
> > only instead of default elements and their respective values.
> 
> Elements have content, do you mean that? 
> 
> You would have to insert the new content anyway,
> so replacing content would do fine.
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

Good to learn about insertAdjacentElement function. Thanks.

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

#33687

On Thursday, August 3, 2017 at 2:34:50 PM UTC-4, justaguy wrote:
> On Thursday, August 3, 2017 at 5:27:49 AM UTC-4, Evertjan. wrote:
> > justaguy  wrote on 03 Aug 2017 in
> > comp.lang.javascript: 
> > 
> > >> > </table>
> > >> 
> > >> Never mind, solved.  append any new child to a fake div below it,
> > >> that's it.
> > 
> > "Fake" is so very Trumpian!
> > 
> > What about:
> > 
> > <script type='text/javascript'> 
> > 'use strict';
> > function duplicateAfter(t) {
> >   t.insertAdjacentElement('afterend',t.cloneNode(true));
> > };
> > </script>
> > 
> > <table onclick='duplicateAfter(this);'>
> > <tr><td>Blah
> > </table>
> > 
> > Warning: any id will be illegally duplicated too!
> > 
> > > But it would be good to know if we have a way to copy elements structure
> > > only instead of default elements and their respective values.
> > 
> > Elements have content, do you mean that? 
> > 
> > You would have to insert the new content anyway,
> > so replacing content would do fine.
> > 

I still wonder if we have a simple way to copy elements without their respective values. For instance, after a user fills the two INPUT fields in the sample table and then click on the clone function, then, I'd like the same two fields to show up without values (from the copied node), that is, just empty INPUT fields.

What's the correct syntax for something like the following without looping through an entire node?

function duplicateAfter(t) { 
  /* something like the following? */
  newNode = t.cloneNode(true);
  if (newNode('tagName') == 'input') {
    // set the element's value to nothing
     element.value = '';
    }
  /* end of making field empty
  t.insertAdjacentElement('afterend',newNode); 


Thanks.

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

#33688

On Friday, August 4, 2017 at 3:50:30 PM UTC-4, justaguy wrote:
> On Thursday, August 3, 2017 at 2:34:50 PM UTC-4, justaguy wrote:
> > On Thursday, August 3, 2017 at 5:27:49 AM UTC-4, Evertjan. wrote:
> > > justaguy  wrote on 03 Aug 2017 in
> > > comp.lang.javascript: 
> > > 
> > > >> > </table>
> > > >> 
> > > >> Never mind, solved.  append any new child to a fake div below it,
> > > >> that's it.
> > > 
> > > "Fake" is so very Trumpian!
> > > 
> > > What about:
> > > 
> > > <script type='text/javascript'> 
> > > 'use strict';
> > > function duplicateAfter(t) {
> > >   t.insertAdjacentElement('afterend',t.cloneNode(true));
> > > };
> > > </script>
> > > 
> > > <table onclick='duplicateAfter(this);'>
> > > <tr><td>Blah
> > > </table>
> > > 
> > > Warning: any id will be illegally duplicated too!
> > > 
> > > > But it would be good to know if we have a way to copy elements structure
> > > > only instead of default elements and their respective values.
> > > 
> > > Elements have content, do you mean that? 
> > > 
> > > You would have to insert the new content anyway,
> > > so replacing content would do fine.
> > > 
> 
> I still wonder if we have a simple way to copy elements without their respective values. For instance, after a user fills the two INPUT fields in the sample table and then click on the clone function, then, I'd like the same two fields to show up without values (from the copied node), that is, just empty INPUT fields.
> 
> What's the correct syntax for something like the following without looping through an entire node?
> 
> function duplicateAfter(t) { 
>   /* something like the following? */
>   newNode = t.cloneNode(true);
>   if (newNode('tagName') == 'input') {
>     // set the element's value to nothing
>      element.value = '';
>     }
>   /* end of making field empty
>   t.insertAdjacentElement('afterend',newNode); 
> 
> 
> Thanks.

Ahe, it's getElementsByTagName, but looping through all the elements is a price.

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

#33689

On Thursday, August 3, 2017 at 5:27:49 AM UTC-4, Evertjan. wrote:
> justaguy wrote on 03 Aug 2017 in
> comp.lang.javascript: 
> 
> >> > </table>
> >> 
> >> Never mind, solved.  append any new child to a fake div below it,
> >> that's it.
> 
> "Fake" is so very Trumpian!
> 
> What about:
> 
> <script type='text/javascript'> 
> 'use strict';
> function duplicateAfter(t) {
>   t.insertAdjacentElement('afterend',t.cloneNode(true));
> };
> </script>
> 
> <table onclick='duplicateAfter(this);'>
> <tr><td>Blah
> </table>
> 
> Warning: any id will be illegally duplicated too!
> 
> > But it would be good to know if we have a way to copy elements structure
> > only instead of default elements and their respective values.
> 
> Elements have content, do you mean that? 
> 
> You would have to insert the new content anyway,
> so replacing content would do fine.
> 

But if there's a radio button element in the form, the original checked value is not retained when its clone node is created, looks like it's a bug.

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

#33690

justaguy <lichunshen84@gmail.com> wrote on 05 Aug 2017 in
comp.lang.javascript: 

> On Thursday, August 3, 2017 at 5:27:49 AM UTC-4, Evertjan. wrote:

>> Elements have content, do you mean that? 
>> 
>> You would have to insert the new content anyway,
>> so replacing content would do fine.
>> 
> 
> But if there's a radio button element in the form, the original checked
> value is not retained when its clone node is created, looks like it's a
> bug. 

Please no!

What do you mean by "original checked value"?

"checked" of a radio-button is not a value,
the attribute checked of a radio-button can be true/false,
that is whay I would also and de facto call 'content',
where the topmost checked is the form's radio-button value.

But unless that is expressly stated so in the html,
why should that value be carried on a DOM-cloning?

[When you are DNA-cloned, will your clone carry your memories?]

[I hope you plan to clone the whole form, if you clone a radio-button-group 
inside a form, you will have to rename the name of the second group]


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

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

#33691

justaguy wrote:

> One can click on the following table to clone it but the trouble is
> one can also click anywhere inside the table to create another clone
> and that's not desirable.  So, the question is, how can we put the
> "Add" or similar button or text to inform a user to click to make a
> copy of this table and not allowing the event to be triggered by
> clicking on just any spot inside the table?

You may either use event delegation [1] or simply remove the event 
handler from the table and add it to a button.

> <table id="A1" onclick="var newNode = this.cloneNode(true);
> this.appendChild(newNode);" caption="Add">
Warning: Avoid using event handler HTML attributes (aka inline event 
handlers) like the one shown above [2].

> <tr> <td> Code (A1) <input
> type="checkbox" id="A1check" name="A1check" value=1> <input
> type="button" value="add">  </td> </tr>

Look, you have already created such a button there. So here it goes an 
example of event delegation:

<script type="text/javascript">
   (function (d) {
     'use strict';
     d.addEventListener('DOMContentLoaded',
       function () {
         let tbl = d.getElementById("A1");
         tbl.addEventListener('click', cloneTable, false);
       }, false);
   }(document));

   function cloneTable(e) {
     // this === e.currentTarget (the table)
     let el = e.target;
     if (el.type == 'button' && el.value == 'add') {
       let newNode = this.cloneNode(true);
       this.insertAdjacentElement('afterend', newNode);
     }
   }
</script>

[1] <https://davidwalsh.name/event-delegate>

[2] 
<https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_—_don't_use_these>

-- 
Joao Rodrigues

[toc] | [prev] | [standalone]

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

csiph-web