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

Groups > comp.lang.javascript > #28416

Re: Retrieve a select from a table cell

Show key headers only | View raw

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.

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

Thread

Retrieve a select from a table cell "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-14 14:24 +0200
  Re: Retrieve a select from a table cell "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-07-14 14:45 +0200
    Re: Retrieve a select from a table cell Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-14 16:54 +0200
      Re: Retrieve a select from a table cell "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-07-14 23:20 +0200
    Re: Retrieve a select from a table cell "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-15 09:11 +0200
  Re: Retrieve a select from a table cell Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-14 21:36 +0200
    Re: Retrieve a select from a table cell Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-14 21:41 +0200
    Re: Retrieve a select from a table cell "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-15 09:10 +0200
      Re: Retrieve a select from a table cell Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-15 09:46 +0200
        Re: Retrieve a select from a table cell "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-07-15 10:03 +0200
          Re: Retrieve a select from a table cell "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2015-07-15 06:33 -0700
        Re: Retrieve a select from a table cell "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-15 10:17 +0200
          Re: Retrieve a select from a table cell Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-15 11:47 +0200
            Re: Retrieve a select from a table cell "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-15 13:11 +0200
              Re: Retrieve a select from a table cell Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-18 18:04 +0200
  Re: Retrieve a select from a table cell Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-07-14 16:44 -0300
    Re: Retrieve a select from a table cell Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-07-14 17:03 -0300
      Re: Retrieve a select from a table cell Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-14 22:07 +0200
        Re: Retrieve a select from a table cell Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-07-14 17:28 -0300
          Re: Retrieve a select from a table cell Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-15 00:23 +0200
    Re: Retrieve a select from a table cell Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-14 22:02 +0200

csiph-web