Załadowanie do tablicy wielowymiarowej danych z kolumn w tabeli HTML Opcje

[Tomasz7755]

Witam

Mam prosta tabele w HTML i chcialbym aby petla w JS przeszla po wszystkich kolumnach ,pobrała dane oraz wysłała ajaxem do pliku php

kod HTML wyglada tak :

[HTML] pobierz, plaintext 
<button id="sendData">Send</button>
        <table>
			<thead>
				<tr>
					<th>Date</th>
					<th>City</th>
					<th>City ID</th>
				</tr>
			</thead>
			<tbody>
                            <tr>
                                <td class="Date">10-07-16</td>
                                <td class="City">LA</td>
                                <td class="CityID">525665</td>
                            </tr>
                             <tr>
                                <td class="Date">11-07-16</td>
                                <td class="City">NY</td>
                                <td class="CityID">6545221</td>
                            </tr>
                             <tr>
                                <td class="Date">12-07-16</td>
                                <td class="City">WS</td>
                                <td class="CityID">78526</td>
                            </tr>
                        </tbody>
		</table>
[HTML] pobierz, plaintext 

a kod JS tak:

[HTML] pobierz, plaintext 
 
            $('#sendData').click(function() 
		{
                    var fArray = [];
 
                    for(var i = 0; i < $('tr').length; i++)
                    {
                        var date = document.getElementsByClassName('Date')[i].textContent;
                        var city = document.getElementsByClassName('City')[i].textContent;
                        var cityID = document.getElementsByClassName('CityID')[i].textContent;
 
                        fArray[i] = [];
                        fArray[i]['date'] = date;
                        fArray[i]['city'] = city;
                        fArray[i]['cityID'] = cityID;
                    }
 
                    $.ajax({
                       type: 'POST',
                       url: 'test.php',
                       data: {data : fArray}
 
                       }).done(function(content) {		
                             alert(content)  
 
                       });	
		}); // end click
[HTML] pobierz, plaintext 

plik PHP po to proste print_r , chciałbym w alercie zobaczyc czy wszystko sie dobrze przesyła, jednak konsola wyrzuca mi ,ze

TypeError: document.getElementsByClassName(...)[i] is undefined
<anonimowa>
test.html:46
m.event.dispatch()
jquery.min.js:3
m.event.add/r.handle()
jquery.min.js:3

46 linia w pliku html to var date = document.getElementsByClassName('Date')[i].textContent;

i nei widze tu błedu, gdy zakomentuje kod i dodam w petli alert(date) to wyswietla wszystko poprawnie. Korzystam z jquery 1.11.1 ktora jest dodana do pliku.

Ma ktos jakis pomysl na to ? albo moze lepsze rozwiazanie ,dzieki ktoremu przesle jednym kliknieciem wszystkie dane ? To bardzo wazne ,aby przeslac naraz dane z wszystkich kolumn ,przesylanie pojedynczej kolumny z danymi nie moze byc tu zastosowane .

Pozdrawiam