Getting values from td elements.

Hello I would like some help on getting values from the td elements based on the city , so I can save them in two seperate variables.
like var London = 81 and paris = 103 I've tried some thing but can't seem to figure out how to do this properly. Would appreciate some help.

<tr>
  <td class = "city">London</td>
  <td>6</td>
  <td>18</td>
  <td>12</td>
  <td>22</td>
  <td>23</td>
</tr>
<tr>
  <td class = "city">Paris</td>
  <td>24</td>
  <td>25</td>
  <td>18</td>
  <td>19</td>
  <td>17</td>
</tr>
 
var index = document.getElementsByTagName("tr");
 
for (var i = 0; i < index.length; i++)
    {
        if(index[i].firstChild.innerHTML == "London"
        {
        }
    }

Code (markup):

 

Give the row an Id:

    <tr id="London">

Code (markup):

Then it Works like this:

var London=document.getElementById("London");
for (var i = 3; i < London.childNodes.length; i++){
        if(i%2!=0)
        alert (London.childNodes[i].innerHTML);
}

Code (markup):

Strange. somehow this madafaka has some empty childNodes. That's why i inserted the if(i%2!=0)

i starts at 3 so you don't get the value of the first td containing "London".

 

Ok, you've got a few logic disconnects in your code -- and no dafuqjoe, throwing an ID a the TR isn't quite the best answer.

What you are missing is that firstchild on your TR may not in fact be the first TAG. Whitespace is preserved in the DOM as an element, so that space between the TR and opening the TD? That's what your firstChild is pointing at.

Now, secondly -- why are those even TD? They appear to be the heading/topic for the row, so make them TH with SCOPE="ROW" on them. (just as your column headings should be TH with SCOPE="COL" on them)... and as the only TH they don't need classes. Again, there is more that goes into a table than just TR and TD... are you using THEAD, TBODY, CAPTION and SCOPE properly if at all?

<tr>
  <th scope="row">London</th>
  <td>6</td>
  <td>18</td>
  <td>12</td>
  <td>22</td>
  <td>23</td>
</tr>
<tr>
  <th scope="row">Paris</th>
  <td>24</td>
  <td>25</td>
  <td>18</td>
  <td>19</td>
  <td>17</td>
</tr>

Code (markup):

From there you need to walk the DOM until you get to the TH. Also "index" is a REALLY BAD name since much like key it indicates your offset into an array/list, NOT the array or list itself!

var trList = document.getElementsByTagName("tr");

for (var i = 0; i < trList.length; i++) {

	/* find the first child that's a TH */
	var tag = trList[i].firstChild;
	while (tag && (tag.tagName != 'TH')) {
		tag = tag.nextSibling;
	}
	
	if (tag) {
	
		/* build using textNodes, NOT innerHTML */
		var contents = '';
		var tChild = tag.firstChild;
		while (tChild) {
			if (tChild.nodeName == '#text') {
				contents += String(tChild.nodeValue);
			}
			tChild = tChild.nextSibling;
		}

		/*
			switch better than IF for checking one var against
			many static values, which I assume is your intent
		*/
		switch (contents) {
			case 'London':
				alert('detected London');
			break;
			case 'Paris':
				alert('detected Paris');
			break;
			case 'New York':
				alert('detected New York');
			break;
		}
		
	}
	
}

Code (markup):

Of course if you add tags inside the TH you'll need a more robust textnode adder... but that should do what you are asking... at least assuming you are walking the DOM because you want to perform other operations on the TR one-by-one... like say, if London is listed more than once.

 

Oh, didn't know that! Yes I knew my solution is just some bad one, can obviously learn a lot from you Thanks

 

Drove me batty five or six years ago when I first encountered it. Even worse, not all browsers do it, or do it with the same number of elements. Can really make things annoying when working with 'nextSibling' -- you always have to loop until you find the nodeName or tagName you are looking for.

 

this whole browser compatibility thing make web programming complicated. I try to avoid JS anyway because a lot people disabled it... You need to code everything in a way, that everything works without JS but for people with JS, the JS should be used to improve the usability...

 

This javascript works in most popular browsers.
For better browser compatibility download JQUERY library and try the next code

/* collect all td tags */
var allTd = document.getElementsbyTagName("td");

/* empty array to hold cities */
var allCity = new array();

/* checked trough all collected td */
for(var i=0; i<allTd.length; i++) {
   /* load all td with city class into our previously defined array */
   if(allTd[i].className == "city"){
      allCity = allTd[i].innerHTML;
   }
} 

/* collect your final data */
var london = allCity[0];
var paris = allCity[1]; 

Code (markup):

this next jQuery code is equivalent to the javascript used above.

/* JQUERY code. Too Easy */
var london = $(".city").index(0).text();
var paris = $(".city").index(1).text();

Code (markup):

Yeah! jQuery is as simple as that (use at least version 1.8)

 

Prevent browser compatibility issues = jQuery.

 

Crap all over your website with some idiotic bloated library of asstardery == jQuery. How the hell there's people DUMB ENOUGH to see merit in it's use completely escapes my comprehension!

Because of course bloating out the markup with classes, bloating out the page with a scripting framework that by itself is half the size you should have for a page template of HTML+CSS+SCRIPTS+IMAGES, that's always the best answer... RIGHT...

 

That's why Google, Microsoft, Yahoo and many other huge sites use it. You need to get with the times and move out of 2000.

 

By revisiting the worst of 1997? I don't think so. BTW, of the places you listed, two don't use it!

Google -- I'm not familiar with anything that actually uses it; The search certainly does NOT. Plus and gMail certainly don't... Are you getting that the project is hosted on Google code confused with Google actually using it?

Yahoo has their own stupid bloated defeating the point of using HTML+CSS+SCRIPTS framework called YUI; so why the blue blazes would they be using someone else's?

... leaving just Microsoft, and you're REALLY going to do what they do in terms of web development? REALLY?!? Given pretty much all their sites are inaccessible trash less useful than they were a decade ago -- not really high up on my 'great example' list.

Though I could say the same about the other two as well; Google in particular crapping away everything that made them kill off their competitors in the first place!

 

I see you are not a huge fan of javascript libraries and you give preference to getting all things done by server side php as much as possible before sending them to the client.. Well everyone with his or her own programming style.
I prefer using my clients processor to do more of the work after the page has been retrieved, than bugging the server with a lot of work before the page is sent.
But then it just depends on your taste.,:/

 

No, it depends on accessibility, because what if there is no javascript?

That said, I'm not sure what your statement has to do with this thread; since nobody is saying to use PHP server side to handle this... Though there are those saying to use as little markup as possible and not waste time adding some bloated library that 90%+ of which is just JS doing CSS' job and the rest you'd likely never break even on compared to just writing the code normally in the first place.