CODEWITHSUNDEEP
javascripthtmldom
Azeem
Azeem

Reputation: 2924

Access Tags inside a HTML table through Javascript

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";
   }
}

Upvotes: 1

Views: 1215

Answers (3)

Pavlo Shandro
Pavlo Shandro

Reputation: 808

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>

Upvotes: 1

JoDev
JoDev

Reputation: 6873

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>

Upvotes: 0

artahian
artahian

Reputation: 2093

id is a global field, just do this:

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

instead of what you have written.

Upvotes: 2

Related Questions