| Vladiiimir |
18.05.2019 21:57 |
Обработка события щелчка мыши на строке таблицы
Здравствуйте!
Подскажите пожалуйста как мне обработать событие щелчок мыши на строке таблицы, если у мне заранее не известно сколько строк в данной таблице будет?
У меня есть JSP-файл, в котором в <table> подтягиваются данные из базы данных, количество записей заранее не известно. Нужно чтобы при щелчке мыши на строку бралось значение ячейки (geographkoords) из этой ячейки и передавалось в функцию (UpdateGoogleMap).
<html>
<head>
<title>Главная страница</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 50%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
}
</style>
<script>
var map, marker;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(51.754207,55.106578),
zoom: 8
});
}
function UpdateGoogleMap(latitude, longitude) {
latitude = (latitude && +latitude)||51.754207;
longitude = (longitude && +longitude)||55.106578;
map.setCenter({
lat: latitude,
lng: longitude
});
marker && marker.setMap(null);
marker=new google.maps.marker({
position: {
lat: latitude,
lng: longitude
},
map: map,
title: 'Это здесь'
});
};
</script>
<!-- -->
<script src="https://maps.googleapis.com/maps/api/js?key=ххх&callback=initMap"
async defer></script>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>idPost</th>
<th>namePost</th>
<th>distanceBeetwenSensors</th>
<th>geographkoords</th>
</tr>
</thead>
<tbody>
<c:forEach items="${listPosts}" var="post">
<tr>
<td>${post.idPost}</td>
<td>${post.namePost}</td>
<td>${post.distanceBeetwenSensors}</td>
<td>${post.geographkoords}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div id="map"></div>
</body>
</html>
|