Question

我通过PHP从MySql中提取了一个表。表中的TD具有唯一ID并在循环中自动增加。

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

我正在编写一个Javascript函数，它应该从TD的唯一ID中获取值。

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

但是'<?php echo $i; ?>'剂量似乎有效.. :( 我的意思是，例如---如果i的值是2，那么td变为lat2和lon2 但在javascript中，它没有采用那些ID值，即lat2和lon2 .. 它给出了一个错误，说它是NULL ..

如果您无法理解，这是完整的代码....

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

Answer 1

来自jQuery

for (elem : $("#table-id #tr-id td")){
   $(elem) // you can access your td object here if you have an organized td sequence in each tr
}

Answer 2

因为PHP脚本和Javascript文件是两个不同的东西，变量$i不会延续。

我不确定你从哪里调用getLocation，但我猜这个pos是编号元素？如果是这样，那么：

latitude = document.getElementById('lat' + pos).innerHTML;
longitude = document.getElementByid('lon' + pos).innerHTML;
load_map();

如果这不能回答您的问题，请更新您的问题，以便向我们提供有关这些函数调用位置的更多信息（更具体地说，是getLocation函数）。

Answer 3

哇，最后一个问题包含了更多的背景。

我不会通过DOM检索信息。最好将此信息直接提供给函数：

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

然后是Javascript-part - 不完整 - 但请注意参数如何传递到需要它们的位置：

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

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

3 个答案: