Access Tags inside a HTML table through Javascript

Question

I have following table structure:

<table id="currentloc_table">
    <tr>
    <th></th>
    <th>Name</th>
    <th>Details</th>
    </tr>
    <tr>
        <td><input id='viewonMapCheckbox' type='checkbox'></td>
        <td>
            <span class="tooltip" href="#">
                <span class="custom info">
                    <em>
                    </em>
                    Last Activity: 2013-03-12 03:29:21<br/>
                    Latitude: <span id="lat">30</span><br/>
                    Longitude: <span id="lon">70</span><br/>
                </span>
            </span>
        </td>
        <td>Details</td>
    </tr>
</table>

I need to set Latitude and Longitude values using Javascript but not able to make it work. Please help me out. Here is the code which i have written:

var loc_table = document.getElementById('currentloc_table');
var loc_table_rows_count = document.getElementById('currentloc_table').getElementsByTagName("tr").length;
for (var i = 0; i < loc_table_rows_count; i++) {
    if (i > 0) {//skipping header row
        var row = loc_table.rows[i];
        row.cells[1].firstChild.firstChild.getElementById("lat").innerHTML = "31";
        row.cells[1].firstChild.firstChild.getElementById("lon").innerHTML = "71";
   }
}

Answer 1

id is a global field, just do this:

document.getElementById("lat").innerHTML = "31";
document.getElementById("lon").innerHTML = "71";

instead of what you have written.

Answer 2

Looks like you need to have more than one row. In this case you can't use ID's for spans (we should have one unique ID on page). About resolving your task: Change your ID attribute to CLASS . Simple JS solution:

var loc_table = document.getElementById('currentloc_table');
var loc_table_rows = loc_table.getElementsByClassName("table_row");
for (var i = 0; i < loc_table_rows.length; i++) {
    var row = loc_table_rows[i];
    var rowLatitude=row.getElementsByClassName('lat')[0].innerHTML='31';
    var rowLongitude=row.getElementsByClassName('lon')[0].innerHTML='71';
}

HTML example:

<table id="currentloc_table">
    <tr>
        <th></th>
        <th>Name</th>
        <th>Details</th>
    </tr>
    <tr class="table_row">
        <td>
            Latitude: <span class="lat">30</span><br/>
            Longitude: <span class="lon">70</span><br/>
        </td>
    </tr>
    <tr class="table_row">
        <td>
            Latitude: <span class="lat">30</span><br/>
            Longitude: <span class="lon">70</span><br/>
        </td>
    </tr>
</table>

Answer 3

var loc_table = document.getElementById('currentloc_table');
var loc_table_rows_count = document.getElementById('currentloc_table').getElementsByTagName("tr").length;
for (var i = 1; i < loc_table_rows_count; i++) {
        document.getElementById("lat"+i).innerHTML = "31";
        document.getElementById("lon"+i).innerHTML = "71";
}

And in your HTML, add the number of the row in the id attribute. For example :

<table id="currentloc_table">
    <tr>
    <th></th>
    <th>Name</th>
    <th>Details</th>
    </tr>
    <tr>
        <td><input id='viewonMapCheckbox' type='checkbox'></td>
        <td>
            <span class="tooltip" href="#">
                <span class="custom info">
                    <em>
                    </em>
                    Last Activity: 2013-03-12 03:29:21<br/>
                    Latitude: <span id="lat1">30</span><br/>
                    Longitude: <span id="lon1">70</span><br/>
                </span>
            </span>
        </td>
        <td>Details</td>
    </tr>
</table>