Как использовать getelementByID в Javascript, когда значения ID находятся в цикле и автоинкремент - PullRequest
Новая
       17

Как использовать getelementByID в Javascript, когда значения ID находятся в цикле и автоинкремент

1 голос
/ 09 августа 2011

У меня есть таблица, которую извлекают из MySql через PHP. TD в таблицах имеют уникальные идентификаторы и автоматически автоинкрементируются в цикле. 

$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, которая должна получать значения изуникальные идентификаторы TDs .. 

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

Но, похоже, '<?php echo $i; ?>' dosent работает .. :( Я имею в виду, например, --- Если значение i равно 2, то td становится lat2 иlon2, но в javascript он не принимает эти значения идентификаторов, т. е. 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>

Ответы [ 3 ]

0 голосов
/ 09 августа 2011

Поскольку скрипт PHP и файл Javascript - это две разные вещи, переменная $i не переносится.

Я не совсем уверен, откуда вы вызываете getLocation, но я предполагаю, что pos это пронумерованный элемент? Если это так, то выполните: 

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

Если это не отвечает на ваш вопрос, обновите ваш вопрос, чтобы дать нам немного больше информации о том, где эти функции вызываются (более конкретно, функция getLocation).

0 голосов
/ 09 августа 2011

Ого, последний вопрос содержал немного больше контекста.

Я бы не стал получать информацию через 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-часть - неполная - но обратите внимание, как параметры передаются в точку, где они необходимы: 

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...
}
0 голосов
/ 09 августа 2011

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