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

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

Retrieve a select from a table cell

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

Contents

  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

Page 1 of 2  [1] 2  Next page →

#28411 — Retrieve a select from a table cell

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'>
         <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){
	var ns=document.createElement("SELECT")
	var op=document.createElement("OPTION")
	op.value="M"
	op.text="Memo"
	ns.appendChild(op)
	op=document.createElement("OPTION")
	op.value="N"
	op.text="Numeric"
	ns.appendChild(op)
	op=document.createElement("OPTION")
	op.value="C"
	op.text="Character"
	ns.appendChild(op)
	var table = document.getElementById(tableID);
	var lastrow=table.rows[(table.rows.length)-1]
	var lastcell=lastrow.cells[(lastrow.cells.length)-1]
	lastrow.insertCell(lastrow.cells.length)
	lastrow.cells[(lastrow.cells.length)-1].appendChild(ns)
}

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);
  for (var f=0;f<table.rows.length;++f){
   for (var g=0;g<table.rows[f].cells.length;++g){
    table.rows[f].cells[g].onclick=function(){
     var fc=this.firstChild;
     if (fc) {
      alert(fc.type+" - "+fc.nodeName+" - "+fc.value+" - "+fc.nodeType)
     }
    }
   }
  }
}

When I click on the cell containing the first SELECT I have:
undefined - #text - undefined - 3
and I am not able to retrieve the selectedIndex for the SELECT.

while the second one gives:
select-one - select - M - 1
and I'm fine with firstChild.selectedIndex

Tried with Firefox, Opera, Konqueror.

What am I missing?

Dan

-- 
"Everybody should pay taxes with a smile"
I tried, but they want money.

[toc] | [next] | [standalone]

#28412

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()

Well, remove all whitespace between the tags in the HTML version, and
most likely you get the same behavior.

> Now I put an onclick() on cells just to see the firstChild element of
> the TD in the cell:

Node.firstChild does not necessarily yield the the first child *element*
of the node.  If you want to get that, use ParentNode.firstElementChild
(you may want to write a wrapper/fallback in case the method is not
supported).

Alternatively, you can retrieve all select elements with
Element.getElementsByTagName("select").

-- 
Christoph M. Becker

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

#28415

Christoph M. Becker wrote:

> 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()
> 
> Well, remove all whitespace between the tags in the HTML version, and
> most likely you get the same behavior.

ACK.
 
>> Now I put an onclick() on cells just to see the firstChild element of
>> the TD in the cell:
> 
> Node.firstChild does not necessarily yield the the first child *element*
> of the node.  If you want to get that, use ParentNode.firstElementChild
> (you may want to write a wrapper/fallback in case the method is not
> supported).
> 
> Alternatively, you can retrieve all select elements with
> Element.getElementsByTagName("select").

You are writing interface names as if they would refer to objects.  This is 
confusing, and wrong if taken verbatim, because in recent DOM 
implementations those names can and do refer to objects, but not to objects 
that implement the interface, but objects that provide access to its 
features via the prototype chain.  Unfortunately, this mistake of 
oversimplification is perpetuated by references such as MDN.

[I am writing Element::getElementsByTagName(…) when I am referring to the 
abstract method of the interface, and element.getElementsByTagName(…) when I 
am referring to the implemented method of the element object referred to by 
“element” instead.]

The most compatible and most efficient approach here is to give the control 
a name (“name” attribute), make it part of a form (descendant of a “form” 
element), and refer to it by the corresponding form object and control name 
if necessary (always consider the “this” value first).  Giving the control 
an ID (“id” attribute) and referring it by that using 
document.getElementById(…) is second to the former in backwards 
compatibility; but maybe not in efficiency, particularly not if there are 
several controls with the same name and one only wants to access one of 
them.

The FAQ Notes have more on this.

-- 
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.

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

#28423

Thomas 'PointedEars' Lahn schrieb:

> Christoph M. Becker wrote:
> 
>> Alternatively, you can retrieve all select elements with
>> Element.getElementsByTagName("select").
> 
> You are writing interface names as if they would refer to objects.  This is 
> confusing, and wrong if taken verbatim, because in recent DOM 
> implementations those names can and do refer to objects, but not to objects 
> that implement the interface, but objects that provide access to its 
> features via the prototype chain.  Unfortunately, this mistake of 
> oversimplification is perpetuated by references such as MDN.

Yes, you're right.  I have considered to write
Element.prototype.getElementsByTagName() instead, but that may not be
correct either – with host objects "you never know".

> [I am writing Element::getElementsByTagName(…) when I am referring to the 
> abstract method of the interface, and element.getElementsByTagName(…) when I 
> am referring to the implemented method of the element object referred to by 
> “element” instead.]

That seems to be reasonable, and I tend to follow this convention
prospectively, even though it seems to be rather uncommon for ECMAScript
and as such potentially confusing for readers.

-- 
Christoph M. Becker

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

#28426

Il 07/14/2015 02:45 PM, Christoph M. Becker ha scritto:
> 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()
>
> Well, remove all whitespace between the tags in the HTML version, and
> most likely you get the same behavior.
>

Gosh, you are right, I was getting the spaces, not the <select> :-(
Thanks.
Dan
-- 
"Everybody should pay taxes with a smile"
I tried, but they want money.

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

#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.

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

#28418

Thomas 'PointedEars' Lahn wrote:

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

Should be at least

  var target = (e ? e.target : window.event.srcElement);

>     if (!target) return true;

-- 
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.

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

#28425

Il 07/14/2015 09:36 PM, Thomas 'PointedEars' Lahn ha scritto:

<...> (many corrections on details, [down to the point to argue about 
the name I assigned to a variable - come on! :-)]
and some interesting suggestions:
I was in a hurry, I wrote that Q&D piece of code just to post the 
message, hoping to find some answers when back again to my PC.

>
>>      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 */
>      }
>    };
>
>>     }
>>    }
>> }

Interesting. Thanks, I did not even think about event.target or 
window.event.srcElement.

>
> 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?
>

You have been very precise and useful, but I must say that the fragments 
I posted are just a couple of tries I made to understand why I was not 
able to get the <select> values. To be honest, I started with an example 
I found on the net, in which new rows are created reading the HTML 
existing table, and just putting in the cells after insertCell() the 
innerHTML read from the existing cells. I assumed that createElement() 
and appendChild() is a more precise and compatible way to do it and 
discovered that this way I can access the <select> values. Thanks to 
Christoph Becker I realized that the formatting spaces are present in 
the DOM so I was not reading the <select> control at all.

The onclick() is only a quick way to display via alert() the fetched 
values, it is nothing more than a (for internal use only) test.

Now I am still trying to get your first answer, the one about properties 
via prototype chain and via object reference - a bit obscure to me. :-(

Dan
-- 
"Everybody should pay taxes with a smile"
I tried, but they want money.

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

#28427

danca (Daniele Campagna) wrote:

> The onclick() is only a quick way to display via alert() the fetched
> values, it is nothing more than a (for internal use only) test.

Why do you not use the DOM Inspector instead?
 
-- 
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.

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

#28429

Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote on 15 Jul 2015 in 
comp.lang.javascript:

> danca (Daniele Campagna) wrote:
> 
>> The onclick() is only a quick way to display via alert() the fetched
>> values, it is nothing more than a (for internal use only) test.
> 
> Why do you not use the DOM Inspector instead?

Next to the many programmers with small brains, 
there might be programmers with small screens and big mice.

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

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

#28438

On Wednesday, July 15, 2015 at 3:03:17 AM UTC-5, Evertjan. wrote:
> Thomas 'PointedEars' Lahn wrote on 15 Jul 2015 in 
> comp.lang.javascript:
> 
> > danca (Daniele Campagna) wrote:
> > 
> >> The onclick() is only a quick way to display via alert() the fetched
> >> values, it is nothing more than a (for internal use only) test.
> > 
> > Why do you not use the DOM Inspector instead?
> 
> Next to the many programmers with small brains, 
> there might be programmers with small screens and big mice.

1. The inspector screens can be separated from the main window

2. The context menu of the mouse also most likely has an "Inspect Element" option in the relevant browsers.

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

#28430

Il 07/15/2015 09:46 AM, Thomas 'PointedEars' Lahn ha scritto:
> danca (Daniele Campagna) wrote:
>
>> The onclick() is only a quick way to display via alert() the fetched
>> values, it is nothing more than a (for internal use only) test.
>
> Why do you not use the DOM Inspector instead?
>
>
Yes, i do!
But this time it was of no help. The DOM inspector did not show the 
spaces, just the <select> after the <td> so I was puzzled and began to 
put the onclick() to eventually use an old piece of code i wrote years 
ago, when I was unaware of the Mozilla debugger and opera Dragonfly and 
so on.
Here is the code, JFC:

function inspect(anOb,aFrame){					
// caveat: some properties are not visible, and others raise an exception
  var txt="";
  if (!aFrame) aFrame=window.open()
   if (z) clearTimeout(z);	
    inside=0
    for(var prop in anOb){
     inside=1;
     txt=txt+"<a href='#' onclick='window.opener.inspect("+prop+"); 
  return false'>"+prop+"</a>"			
     try{
     txt=txt+" = "+anOb[prop]
     }catch(e){
     if (inside==0)  {var z=setTimeout(function()
     {inspect(aBox,aDoc,isWr)},333)
     } else {
     txt=txt+' = errore!';
     }
   }
txt=txt+"<br>"
}
aFrame.document.write(txt)
aFrame.document.close()
}

It is a Q&D way to see the internals of an object, so I was planning to 
write onclick=inspect(this)... :-)

Dan
-- 
"Everybody should pay taxes with a smile"
I tried, but they want money.

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

#28431

danca (Daniele Campagna) wrote:

> […] The DOM inspector did not show the spaces, […]

You need to enable “Show whitespace characters” and the like.

See also <http://devtoolsecrets.com/> (referred to by the FAQ).

> Here is the code, JFC:
> 
> function inspect(anOb,aFrame){
> // caveat: some properties are not visible, and others raise an exception

/Essato/.  With a for-in statement you only get the *enumerable* properties, 
and you cannot convert all property values to string.  In theory, ES 5’s 
Object.getOwnPropertyNames(…) gives you the names of all own property names, 
regardless whether the property is enumerable; but I have observed that it 
does not work that well with host objects – the array may be empty, 
unexpectedly.  However, the two approaches can be combined for a more 
complete picture.  (I wonder how they are doing it in the DOM Inspector; 
probably it is just a matter of UTSL.)

>   var txt="";
>   if (!aFrame) aFrame=window.open()
>    if (z) clearTimeout(z);
>     inside=0

Undeclared identifier.  (You *really* want to use strict mode, and JSHint.)

>     for(var prop in anOb){
>      […]
>      try{
>      txt=txt+" = "+anOb[prop]
>      }catch(e){
>      if (inside==0)  {var z=setTimeout(function()
>      {inspect(aBox,aDoc,isWr)},333)

Why?

> […]
> }
> 
> It is a Q&D way to see the internals of an object, so I was planning to
> write onclick=inspect(this)... :-)

  onclick="console.log(this)"

-- 
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.

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

#28436

Il 07/15/2015 11:47 AM, Thomas 'PointedEars' Lahn ha scritto:
> danca (Daniele Campagna) wrote:
>
>> […] The DOM inspector did not show the spaces, […]
>
> You need to enable “Show whitespace characters” and the like.
>
> See also <http://devtoolsecrets.com/> (referred to by the FAQ).
>

Holy crap!
"There Are More Things In The Earth And In The Sky Than A Man Can Even 
Imagine" (cit. [probably inexact])

>> Here is the code, JFC:
>>
>> function inspect(anOb,aFrame){
>> // caveat: some properties are not visible, and others raise an exception
>
> /Essato/.  With a for-in statement you only get the *enumerable* properties,

Uhm... if it is not an obscure latin word maybe you mean "esatto" 
(correct, right, exact - richtig)

> and you cannot convert all property values to string.  In theory, ES 5’s
> Object.getOwnPropertyNames(…) gives you the names of all own property names,
> regardless whether the property is enumerable; but I have observed that it
> does not work that well with host objects – the array may be empty,
> unexpectedly.  However, the two approaches can be combined for a more
> complete picture.  (I wonder how they are doing it in the DOM Inspector;
> probably it is just a matter of UTSL.)
>

You know, I had to search for this (www.abbreviations.com).
JFTR :

UTSL
     [Unix] On-line acronym for ‘Use the Source, Luke’ (a pun on Obi-Wan 
Kenobi's “Use the Force, Luke!” in Star Wars) — analogous to RTFS (sense 
1), but more polite. This is a common way of suggesting that someone 
would be better off reading the source code that supports whatever 
feature is causing confusion, rather than making yet another futile pass 
through the manuals, or broadcasting questions on Usenet that haven't 
attracted wizards to answer them.Once upon a time in elder days, 
everyone running Unix had source. After 1978, AT&T's policy tightened 
up,... [omissis]

>>      inside=0
>
> Undeclared identifier.  (You *really* want to use strict mode, and JSHint.)
Oops
>
>>      for(var prop in anOb){
>>       […]
>>       try{
>>       txt=txt+" = "+anOb[prop]
>>       }catch(e){
>>       if (inside==0)  {var z=setTimeout(function()
>>       {inspect(aBox,aDoc,isWr)},333)
>
> Why?
>

Re-oops. A residual piece of code from another implementation, sorry.

>> […]
>> }
>>
>> It is a Q&D way to see the internals of an object, so I was planning to
>> write onclick=inspect(this)... :-)
>
>    onclick="console.log(this)"
>

Right, we are in 2015 now...

-- 
"Everybody should pay taxes with a smile"
I tried, but they want money.

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

#28450

danca (Daniele Campagna) wrote:

> Il 07/15/2015 11:47 AM, Thomas 'PointedEars' Lahn ha scritto:
>> danca (Daniele Campagna) wrote:
>>> […] The DOM inspector did not show the spaces, […]
>> You need to enable “Show whitespace characters” and the like.
>>
>> See also <http://devtoolsecrets.com/> (referred to by the FAQ).
> 
> Holy crap!
> "There Are More Things In The Earth And In The Sky Than A Man Can Even
> Imagine" (cit. [probably inexact])

  Horatio:
    O day and night, but this is wondrous strange!

  Hamlet:
    And therefore as a stranger give it welcome.
    There are more things in heaven and earth, Horatio,
    Than are dreamt of in your philosophy.
    […]

  –William Shakespeare (1564–1616),
   “The Tragicall Historie of Hamlet, Prince of Denmarke” (c. 1601),
   act Ⅰ, scene Ⅴ
 
>> /Essato/.  With a for-in statement you only get the *enumerable*
>> properties,
> 
> Uhm... if it is not an obscure latin word maybe you mean "esatto"
> (correct, right, exact - richtig)

Yes, thank you.
 
>> […]  (I wonder how they are doing it in the DOM Inspector;
>> probably it is just a matter of UTSL.)
> 
> You know, I had to search for this (www.abbreviations.com).
> JFTR :
> 
> UTSL
>      [Unix] On-line acronym for ‘Use the Source, Luke’ (a pun on Obi-Wan
> Kenobi's “Use the Force, Luke!” in Star Wars) — […]

Esatto :)

-- 
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.

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

#28417

Em 14/07/2015 09:24, danca (Daniele Campagna) escreveu:
> 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'>
>         <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){
>     var ns=document.createElement("SELECT")
>     var op=document.createElement("OPTION")
>     op.value="M"
>     op.text="Memo"
>     ns.appendChild(op)
>     op=document.createElement("OPTION")
>     op.value="N"
>     op.text="Numeric"
>     ns.appendChild(op)
>     op=document.createElement("OPTION")
>     op.value="C"
>     op.text="Character"
>     ns.appendChild(op)
>     var table = document.getElementById(tableID);
>     var lastrow=table.rows[(table.rows.length)-1]
>     var lastcell=lastrow.cells[(lastrow.cells.length)-1]
>     lastrow.insertCell(lastrow.cells.length)
>     lastrow.cells[(lastrow.cells.length)-1].appendChild(ns)
> }
> 

DOMcreasel() may be simplified to:

  function DOMcreasel(tableID) {
    var ns = document.createElement("SELECT");
    ns.options[ns.options.length] = new Option('Memo', 'M');
    ns.options[ns.options.length] = new Option('Numeric', 'N');
    ns.options[ns.options.length] = new Option('Character', 'C');
    var lastrow = document.querySelector("#" + tableID
                + ">tbody>tr:last-child");
    var i = lastrow.cells.length;
    lastrow.insertCell(i).appendChild(ns);
  }



> Now I put an onclick() on cells just to see the firstChild element of
> the TD in the cell:

You are adding onclick event handlers to every child of the TDs, and
fc.firstchild may be null depending on what you click (use Firefox /
Firebug to see it for yourself).

> 
> function putclick(tableID){
>  var table = document.getElementById(tableID);
>  for (var f=0;f<table.rows.length;++f){
>   for (var g=0;g<table.rows[f].cells.length;++g){
>    table.rows[f].cells[g].onclick=function(){
>     var fc=this.firstChild;
>     if (fc) {
>      alert(fc.type+" - "+fc.nodeName+" - "+fc.value+" - "+fc.nodeType)
>     }
>    }
>   }
>  }
> }
> 
> When I click on the cell containing the first SELECT I have:
> undefined - #text - undefined - 3
> and I am not able to retrieve the selectedIndex for the SELECT.
> 
> while the second one gives:
> select-one - select - M - 1
> and I'm fine with firstChild.selectedIndex
> 
> Tried with Firefox, Opera, Konqueror.
> 
> What am I missing?


So I refactored the code to:

  function putclick(tableID) {
    var tbl = document.getElementById(tableID);
    var elems = tbl.querySelectorAll("input, select");
    for (var i = 0, len = elems.length; i < len; i++) {
      elems[i].addEventListener('click', cellClick, false);
    }
  }

  function cellClick(e) {
    var fc = e.target;
    window.alert(fc.type + " - " + fc.nodeName
                 + " - " + fc.value + " - "
                 + fc.nodeType);
  }

The caveat in my code is that querySelectorAll returns a static
NodeList. However you may use other methods to retrieve a live NodeList
if you need to.

-- 
Joao Rodrigues

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

#28419

Em 14/07/2015 16:44, Joao Rodrigues escreveu:
> Em 14/07/2015 09:24, danca (Daniele Campagna) escreveu:
>> 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'>
>>         <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){
>>     var ns=document.createElement("SELECT")
>>     var op=document.createElement("OPTION")
>>     op.value="M"
>>     op.text="Memo"
>>     ns.appendChild(op)
>>     op=document.createElement("OPTION")
>>     op.value="N"
>>     op.text="Numeric"
>>     ns.appendChild(op)
>>     op=document.createElement("OPTION")
>>     op.value="C"
>>     op.text="Character"
>>     ns.appendChild(op)
>>     var table = document.getElementById(tableID);
>>     var lastrow=table.rows[(table.rows.length)-1]
>>     var lastcell=lastrow.cells[(lastrow.cells.length)-1]
>>     lastrow.insertCell(lastrow.cells.length)
>>     lastrow.cells[(lastrow.cells.length)-1].appendChild(ns)
>> }
>>
> 
> DOMcreasel() may be simplified to:
> 
>   function DOMcreasel(tableID) {
>     var ns = document.createElement("SELECT");
>     ns.options[ns.options.length] = new Option('Memo', 'M');
>     ns.options[ns.options.length] = new Option('Numeric', 'N');
>     ns.options[ns.options.length] = new Option('Character', 'C');
>     var lastrow = document.querySelector("#" + tableID
>                 + ">tbody>tr:last-child");
>     var i = lastrow.cells.length;
>     lastrow.insertCell(i).appendChild(ns);
>   }
> 
> 
> 
>> Now I put an onclick() on cells just to see the firstChild element of
>> the TD in the cell:
> 
> You are adding onclick event handlers to every child of the TDs, and
> fc.firstchild may be null depending on what you click (use Firefox /
> Firebug to see it for yourself).
> 
>>
>> function putclick(tableID){
>>  var table = document.getElementById(tableID);
>>  for (var f=0;f<table.rows.length;++f){
>>   for (var g=0;g<table.rows[f].cells.length;++g){
>>    table.rows[f].cells[g].onclick=function(){
>>     var fc=this.firstChild;
>>     if (fc) {
>>      alert(fc.type+" - "+fc.nodeName+" - "+fc.value+" - "+fc.nodeType)
>>     }
>>    }
>>   }
>>  }
>> }
>>
>> When I click on the cell containing the first SELECT I have:
>> undefined - #text - undefined - 3
>> and I am not able to retrieve the selectedIndex for the SELECT.
>>
>> while the second one gives:
>> select-one - select - M - 1
>> and I'm fine with firstChild.selectedIndex
>>
>> Tried with Firefox, Opera, Konqueror.
>>
>> What am I missing?
> 
> 
> So I refactored the code to:
> 
>   function putclick(tableID) {
>     var tbl = document.getElementById(tableID);
>     var elems = tbl.querySelectorAll("input, select");
>     for (var i = 0, len = elems.length; i < len; i++) {
>       elems[i].addEventListener('click', cellClick, false);
>     }
>   }
> 
>   function cellClick(e) {
>     var fc = e.target;
>     window.alert(fc.type + " - " + fc.nodeName
>                  + " - " + fc.value + " - "
>                  + fc.nodeType);
>   }
>

We can take advantage of the Bubbling Phase [1]. So let's rewrite simply to:

  function putclick(tableID) {
    var tbl = document.getElementById(tableID);
    tbl.addEventListener('click', cellClick, false);
  }

  function cellClick(e) {
    var fc = e.target;
    if (/input|select/i.test(fc.tagName)) {
      window.alert(fc.type + " - " + fc.nodeName
                   + " - " + fc.value + " - "
                   + fc.nodeType);
    }
  }

[1] <http://www.w3.org/TR/DOM-Level-3-Events/#event-flow>


> The caveat in my code is that querySelectorAll returns a static
> NodeList. However you may use other methods to retrieve a live NodeList
> if you need to.
> 


-- 
Joao Rodrigues

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

#28421

Joao Rodrigues wrote:

>   function cellClick(e) {
>     var fc = e.target;
>     if (/input|select/i.test(fc.tagName)) {
>       window.alert(fc.type + " - " + fc.nodeName
>                    + " - " + fc.value + " - "
>                    + fc.nodeType);
>     }
>   }

Not only as insufficient as your first approach (see my other follow-up), 
but even more inefficient and error-prone.  If you are using a regular 
expression, you need to anchor it to prevent false positives, at least 
/^(input|select)$/i.  But you can do without such an expensive RegExp here.  
Finally, the “input” appears to be coming from your imagination only; read 
again.

-- 
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.

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

#28422

Em 14/07/2015 17:07, Thomas 'PointedEars' Lahn escreveu:
> Joao Rodrigues wrote:
> 
>>   function cellClick(e) {
>>     var fc = e.target;
>>     if (/input|select/i.test(fc.tagName)) {
>>       window.alert(fc.type + " - " + fc.nodeName
>>                    + " - " + fc.value + " - "
>>                    + fc.nodeType);
>>     }
>>   }
> 
> Not only as insufficient as your first approach (see my other follow-up), 

The OP's putclick() function didn't seem to take care of the select's
options. She just added new selects with the DOMcreasel() function.

> but even more inefficient and error-prone.  If you are using a regular 
> expression, you need to anchor it to prevent false positives, at least 
> /^(input|select)$/i.

More efficient, but unnecessary for the test case. Why do you always
repeat it?

> But you can do without such an expensive RegExp here.

Expensive for modern JavaScript Engines? Nah.

> Finally, the “input” appears to be coming from your imagination only; read 
> again.
> 

You should read again as you have forgotten the HTML table in the OP's code:

| <TD><INPUT type='checkbox' name='chk'/></TD>
| <TD><INPUT type='text' name='txt'/></TD>

-- 
Joao Rodrigues

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

#28424

Joao Rodrigues wrote:

> Em 14/07/2015 17:07, Thomas 'PointedEars' Lahn escreveu:
>> Joao Rodrigues wrote:
>>>   function cellClick(e) {
>>>     var fc = e.target;
>>>     if (/input|select/i.test(fc.tagName)) {
>>>       window.alert(fc.type + " - " + fc.nodeName
>>>                    + " - " + fc.value + " - "
>>>                    + fc.nodeType);
>>>     }
>>>   }
>> 
>> Not only as insufficient as your first approach (see my other follow-up),
> 
> The OP's putclick() function didn't seem to take care of the select's
> options. She just added new selects with the DOMcreasel() function.
> 
>> but even more inefficient and error-prone.  If you are using a regular
>> expression, you need to anchor it to prevent false positives, at least
>> /^(input|select)$/i.
> 
> More efficient, but unnecessary for the test case. Why do you always
> repeat it?

You are not making sense.
 
>> But you can do without such an expensive RegExp here.
> 
> Expensive for modern JavaScript Engines? Nah.

A conforming implementation of ECMAScript Edition 5 and later is required to 
create a new RegExp instance “each time the [/RegularExpressionLiteral/] is 
evaluated”, and “[t]wo regular expression literals in a program evaluate to 
regular expression objects that never compare as === to each other even if 
the two literals’ contents are identical.” (§ 7.8.5).  IOW, any optimization 
is expressly forbidden there.

And if you want to be backwards-compatible, you cannot use non-capturing 
parentheses for the anchored alternation, so each time the match is 
performed memory must be allocated for the backreference.

Add to that the additional runtime for the matcher by comparison to simple 
string comparison.

Besides, it is a misconception to assume that because there are “modern 
JavaScript engines” the algorithms underlying one’s ECMAScript-based script 
code would not need to be efficient.  Because one cannot know in advance all 
runtime environments one’s code will be exposed to.

>> Finally, the “input” appears to be coming from your imagination only;
>> read again.
> 
> You should read again as you have forgotten the HTML table in the OP's
> code:
> 
> | <TD><INPUT type='checkbox' name='chk'/></TD>
> | <TD><INPUT type='text' name='txt'/></TD>

The OP is evidentially not interested in the values of these controls: Both 
the Subject header field value and their posting reads “Retrieve a *select* 
from a table cell” (emphasis by me).
 
-- 
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.

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

Page 1 of 2  [1] 2  Next page →

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

csiph-web