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

Groups > comp.lang.javascript > #33691

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

Show all headers | View raw

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

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

Thread

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

csiph-web