dojo.query with esri javascript

696
4
11-17-2013 08:23 AM
AndyBurns
Occasional Contributor
Hi

Does anyone here use dojo.query? Im trying to target my tables with even odd styling but i cant get it to work.

I am going to look at building it into a function - currently when the button is clicked the following occur's:

on(dom.byId("exe_CPO_data"), "click", exe_CPO_data);


Could i run two functions on the div click event with the following:

function styleTable() {
          dojo.query("#info table tr:nth-child(odd)").addClass("odd");
       dojo.query("#info table tr:nth-child(even)").addClass("even")
        }


Is there a easier way to target the table styling constantly so each time the table is populated it updated the styling as i have 4 buttons doing a querytask each time.

thanks

Andy
0 Kudos
4 Replies
JasonZou
Occasional Contributor III
No need to define the css classes using JS. Why not using #info table tr:nth-child(odd/even) to define the css style directly in the css file?

#info table tr:nth-child(odd) {
    /* styles for odd rows */
}

#info table tr:nth-child(even) {
    /* styles for even rows */
}
0 Kudos
AndyBurns
Occasional Contributor
I have the css3 styling currently running for demo purposes but i will need to be able to display row styling in IE8 with no CSS3 support.

Any ideas?
0 Kudos
AndyBurns
Occasional Contributor
Hi

Well i think just posting to the forums helps as i think this is the third post i have done that has resulted in my fixing it after going back to it.

It wrecked my head all weekend but i just clicked and put it in the code when building my table data and pushing it out to my div....

  s = s + "<tr><td>" + "<b>" + (aliases.hasOwnProperty(att) && aliases[att]) + "</b>" + ": " + "</td><td>" + featureAttributes[att] + "</td></tr>";
            }
            s = s + "</table><br>";
            }        
          }
           dom.byId("info").innerHTML = s;
           dojo.query("#info table tr:nth-child(odd)").addClass("odd");
          dojo.query("#info table tr:nth-child(even)").addClass("even")

           //Position our mapto the x and y provided in the url
            var point = new esri.geometry.Point([resultExtent.x, resultExtent.y], new esri.SpatialReference({
               wkid: 27700
            }));   

           console.log(point)
           map.centerAt(point);
            if (!graphic) {
                  addGraphic(point);
                } else {
                  graphic.setGeometry(point);
              };   
        };  


I have pasted the code incase anyone else might have this issue without having to pull in jquery or something else as this was so simple in dojo once i knew!
0 Kudos
JeffPace
MVP Alum
glad you found your answer.  To me this is just another example in the dojo jquery argument.

I find myself learning solutions to avoid jquery all the time 🙂
0 Kudos