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 乘性高斯噪声在深度学习网络中的应用
  • ¥15 运筹学排序问题中的在线排序
  • ¥15 关于docker部署flink集成hadoop的yarn，请教个问题 flink启动yarn-session.sh连不上hadoop，这个整了好几天一直不行，求帮忙看一下怎么解决
  • ¥30 求一段fortran代码用IVF编译运行的结果
  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥30 python代码，帮调试，帮帮忙吧