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