Path: csiph.com!usenet.pasdenom.info!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: Retrieve a select from a table cell
Date: Tue, 14 Jul 2015 21:36:58 +0200
Organization: PointedEars Software (PES)
Lines: 129
Message-ID: <1620289.04d1OFRnt4@PointedEars.de>
References: <mo2utl$9s5$1@dont-email.me>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
X-Trace: solani.org 1436902806 11033 eJwFwQcBwEAIBDBLjAOKHMbjX0ITU2efgJvDzo46nPWGgnpXt1aAeCDJDqrLl2toYaqJwfcDHSERIA== (14 Jul 2015 19:40:06 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Tue, 14 Jul 2015 19:40:06 +0000 (UTC)
User-Agent: KNode/4.14.2
X-User-ID: eJwNyMkBwDAIA7CVQsAc4wCt9x+h1VNQF98whxsI8kmz4TaE2JT2JnmPZgCp/z93z5y4sxV4Rb0a9BtW5bMfauEVoA==
Cancel-Lock: sha1:GS/4c7C1qO+fSmEg7Ac42BWHE5E=
X-NNTP-Posting-Host: eJwNxskBACAIA7CV5GjRdQDZfwTNKzAKK5ygYzASRbKVy6G94kRkM68BsITuLTX3Nwe07gcDKhCt
Xref: csiph.com comp.lang.javascript:28416

danca (Daniele Campagna) wrote:

> Hi all, I'm trying to retrieve the value of a <select> in a table cell.
> However, I noticed a different behaviour if i create the element via
> HTML or if I create it via createElement() and then appendChild()
> 
> I create the table via HTML:
> 
> <TABLE id='dataTable' width='350px' border='1'>
                               ^^^^^
Not Valid → <http://validator.w3.org/> (p.)

>          <TR>
>              <TD><INPUT type='checkbox' name='chk'/></TD>
>              <TD><INPUT type='text' name='txt'/></TD>
>              <TD>
>                  <SELECT name='datatype'>
>                      <OPTION value='C'>Character</OPTION>
>                      <OPTION value='M'>Memo</OPTION>
>                      <OPTION value='N'>Numeric</OPTION>
>                  </SELECT>
>              </TD>
>          </TR>
>      </TABLE>
> 
> Then I create a cell and its content via script:
> 
> function DOMcreasel(tableID){

“creasel” should probably be “createSelect”.  The “DOM” appears to be 
superfluous.

> var ns=document.createElement("SELECT")
> var op=document.createElement("OPTION")

It is recommended to use lowercase element type names.  You should return 
early, before attempting to create the “option” element, if the parent 
“select” element could not be created. 

> […]
> }
> 
> Now I put an onclick() on cells just to see the firstChild element of
> the TD in the cell:
> 
> function putclick(tableID){
>   var table = document.getElementById(tableID);
                                                ^
Your code style is inconsistent.  You should either always use semicolons or 
never (and be aware of the problems with the latter thanks to Automatic 
Semicolon Insertion).

>   for (var f=0;f<table.rows.length;++f){

As the number of rows of the table does not change during iteration, it is 
much more efficient to store the value of table.rows.length in a variable 
one time, and use that variable instead.  Also, “f” is an unusual variable 
name for an index; it only makes reading the code harder.  Consider

  for (var i = 0, len = table.rows.length; i < len; ++i) {

instead.  And if order does not matter, it is even more efficient to iterate 
backwards:

  for (var i = table.rows.length; i--;) {

>    for (var g=0;g<table.rows[f].cells.length;++g){

See above.

>     table.rows[f].cells[g].onclick=function(){
>      var fc=this.firstChild;
>      if (fc) {
>       alert(fc.type+" - "+fc.nodeName+" - "+fc.value+" - "+fc.nodeType)
>      }
>     }

Note that creating functions in a loop is error-prone because a function 
creates a closure; JSHint can warn you about this.

The loop and creating functions in a loop is even unnecessary here because 
the “click” event bubbles: you can listen to it at the row (“tr”), row group 
(“thead” or “tbody” element), or the table (“table” element) instead, 
requiring much less event listeners (down to only *one* at the table), 
therefore much less memory (each function definition creates an object).  
You are creating table.rows.length * table.rows[0].cells.length Function 
instances here, assuming that each row of the table has the same number of 
cells as the first one.

The “target” or “srcElement” property of the event object would then yield 
the reference to the event target.  There is only one caveat: If the event 
target is a descendent of a cell, you need to walk up the DOM tree until you 
find the cell.  But because the “click” event bubbles, you need to do that 
in any case, and you neglected it here.

  ….onclick = function (e) {
    var target = e.target || window.event.srcElement;   

    if (!target) return true;

    while (target && target.tagName && target.tagName.toLowerCase() != "td")
    {
      target = target.parentNode;
    }

    if (target && target.tagName)
    {
      /* work with target */
    }
  };

>    }
>   }
> }
> 
> […]
> What am I missing?

Among other things, “document.forms["…"].elements["datatype"]”.

The question is, why are you adding a “click” event listener on the cell in 
the first place?` And why do you think you need to refer to the form control 
in this complicated way?

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.