[英]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. 我需要使用Javascript设置纬度和经度值,但无法使其工作。 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";
}
}
id
is a global field, just do this: id
是一个全局字段,只需这样做:
document.getElementById("lat").innerHTML = "31";
document.getElementById("lon").innerHTML = "71";
instead of what you have written. 而不是你写的。
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). 在这种情况下,您不能使用ID作为跨度(我们应该在页面上有一个唯一的ID)。 About resolving your task: Change your ID
attribute to CLASS
. 关于解决您的任务:将您的ID
属性更改为CLASS
。 Simple JS solution: 简单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 example: 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>
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. 在HTML中,添加id
属性中的行号。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.