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

Groups > comp.lang.javascript > #28419

Re: Retrieve a select from a table cell

From Joao Rodrigues <groups_jr-1@yahoo.com.br>
Newsgroups comp.lang.javascript
Subject Re: Retrieve a select from a table cell
Date 2015-07-14 17:03 -0300
Organization Aioe.org NNTP Server
Message-ID <mo3pud$u2u$1@speranza.aioe.org> (permalink)
References <mo2utl$9s5$1@dont-email.me> <mo3oq2$qo5$1@speranza.aioe.org>

Show all headers | View raw

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

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