doushi2845 2011-08-09 18:22
浏览 74
已采纳

当ID值处于循环并自动递增时，如何在Javascript中使用getelementByID

I have a table being pulled from MySql through PHP.. The TD in the tables have unique IDs and get autoincremented in a loop.

$i=0;
while($row = mysql_fetch_array($result))

  {     $i = $i+1;
        echo "<tr>";
        echo "<td>" . $row['DRAINNAME'] . "</td>";
        echo "<td id='lat" . $i ."'>" . $row['LATITUDE'] . "</td>";
        echo "<td id='lon" . $i ."'>" . $row['LONGITUDE'] . "</td>";
        echo "<td> <input type='button' onclick='detect_load();' value='Click Me' /><br>
        <div id='divsec". $i ."' style='width: 200px; height: 200px;'></div> </td>";
        echo "</tr>";
  }
echo "</table>";

Im writing a Javascript function which should get values from the unique IDs of the TDs..

  function getLocation(pos) {
      latitude = document.getElementById('lat'+ '<?php echo $i; ?>').innerHTML;
      longitude = document.getElementById('lon'+ '<?php echo $i; ?>').innerHTML;
      load_map();
  }

But the '<?php echo $i; ?>' dosent seem to work.. :( I mean, for example--- If the value of i is 2, then td becomes lat2 and lon2 but in javascript, its not taking those ID values i.e. lat2 and lon2.. its giving an error saying its NULL ..

Here is the full Code if you cannot understand it....

<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var latitude = '';
  var longitude = '';

  function getLocation(pos) {
      latitude = document.getElementById('lat'+ <?php echo $i; ?>).innerHTML;
      longitude = document.getElementById('lon'+ <?php echo $i; ?>).innerHTML;
      load_map();
  }
  function unknownLocation(){alert('Could not find location');}


  function detect_load(){
    navigator.geolocation.getCurrentPosition(getLocation, unknownLocation);

  }

  function load_map() { 
    if(latitude == '' || longitude == '')
      return false;
    var latlng = new google.maps.LatLng(latitude, longitude);
    var config = {
      zoom: 11,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    var map = new google.maps.Map(document.getElementById('divsec'+ <?php echo $i; ?>),config);

                  var marker = new google.maps.Marker({
                  position: latlng, 
                  map: map, 
                  title:"Your requested location!"
              });

  }
</script>

</head>
<body>

<?php
include 'datalogin.php';

$result = mysql_query("SELECT DRAINNAME, LATITUDE, LONGITUDE FROM draininfo");

echo "<table border='1' name='tab1'>
<tr>
<th>Drain Name</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Show On Map</th>
</tr>";
$i=0;
while($row = mysql_fetch_array($result))

  {     $i = $i+1;
        echo "<tr>";
        echo "<td>" . $row['DRAINNAME'] . "</td>";
        echo "<td id='lat" . $i ."'>" . $row['LATITUDE'] . "</td>";
        echo "<td id='lon" . $i ."'>" . $row['LONGITUDE'] . "</td>";
        echo "<td> <input type='button' onclick='detect_load();' value='Click Me' /><br>
        <div id='divsec". $i ."' style='width: 200px; height: 200px;'></div> </td>";
        echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>


</body>
</html>
  • 写回答

3条回答 默认 最新

  • dqiz20794 2011-08-09 18:42
    关注

    Woah, the last question contained a little bit more context.

    I would not retrieve the information via DOM. It's better to supply this information directly to the function:

    echo "<td id='lat" . $i ."'>" . $row['LATITUDE'] . "</td>";
echo "<td id='lon" . $i ."'>" . $row['LONGITUDE'] . "</td>";
echo "<td> <input type='button' onclick='detect_load(" 
    . $row['LATITUDE'] . ","
    . $row['LONGITUDE'] . "," 
    . "\"divsec" . $i . "\");' value='Click Me' /><br>
<div id='divsec". $i ."' style='width: 200px; height: 200px;'></div> </td>";

    And then the Javascript-part - incomplete - but notice how the parameters are passed through to the point where they are needed:

    function createGetLocation(latitude, longitude, div) {
    return function(pos) {
        load_map(latitude, longitude, div);
    };
}

function unknownLocation(){alert('Could not find location');}


function detect_load(latitude, longitude, div) {
    var getLocation = createGetLocation(latitude, longitude, div);
    navigator.geolocation.getCurrentPosition(getLocation, unknownLocation);
}

function load_map(latitude, longitude, div) {
    var latlng = new google.maps.LatLng(latitude, longitude);
    var config = {
        zoom: 11,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById(div), config
    // and so on...
}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 拟通过pc下指令到安卓系统，如果追求响应速度，尽可能无延迟，是不是用安卓模拟器会优于实体的安卓手机？如果是，可以快多少毫秒？
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题！！
  • ¥15 ikuai客户端多拨vpn，重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题，如何解决？(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路
  • ¥15 公交车和无人机协同运输
  • ¥15 stm32代码移植没反应