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

@cris there can be multiple rows. I showed single row as sample data. — Azeem
– Azeem, Commented Mar 14, 2013 at 13:16
then each lat and lon will have same id,make sure you have diffrent ids or access them by name — Cris
– Cris, Commented Mar 14, 2013 at 13:29

artahian · Accepted Answer · 2013-03-14 13:06:10Z

2

id is a global field, just do this:

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

instead of what you have written.

answered Mar 14, 2013 at 13:06

artahian

2,10314 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

artahian Over a year ago

When do you call the javascript code? You can't just assign these values at the very start, you should run this javascript code only when page is fully loaded. Look at body onload event to be able to run something when your page is loaded: w3schools.com/jsref/event_body_onload.asp

Azeem Over a year ago

actually i am already doing exactly what you advised. This code is written in JS function which is fired on pageload.

artahian Over a year ago

In that case you should be having something other on your html page, because I just copy-pasted this and when executing JS it changed values.

Pavlo Shandro · Accepted Answer · 2013-03-14 14:20:14Z

1

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>

edited Mar 14, 2013 at 14:20

answered Mar 14, 2013 at 13:12

Pavlo Shandro

8085 silver badges12 bronze badges

1 Comment

Azeem Over a year ago

can you please suggest Javascript code to achieve this instead through jquery. thanks

JoDev · Accepted Answer · 2013-03-14 13:29:39Z

0

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>

edited Mar 14, 2013 at 13:29

answered Mar 14, 2013 at 13:08

JoDev

6,9231 gold badge25 silver badges37 bronze badges

1 Comment

JoDev Over a year ago

What append? Give more explanation... Do you add an row index in the ID of span, to make sure that all id are unique

Collectives™ on Stack Overflow

Access Tags inside a HTML table through Javascript

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related