通过Javascript访问HTML表格中的标签

Question

我有以下表结构：

<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>

我需要使用Javascript设置纬度和经度值，但无法使其工作。 请帮帮我。 这是我写的代码：

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是一个全局字段，只需这样做：

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

而不是你写的。

Answer 2

看起来你需要有多行。 在这种情况下，您不能使用ID作为跨度（我们应该在页面上有一个唯一的ID）。 关于解决您的任务：将您的ID属性更改为CLASS 。 简单JS解决方案：

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示例：

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

在HTML中，添加id属性中的行号。 例如 ：

<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>