Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2019, 21:57
Интересующийся
Отправить личное сообщение для Vladiiimir Посмотреть профиль Найти все сообщения от Vladiiimir
 
Регистрация: 18.05.2019
Сообщений: 19

Обработка события щелчка мыши на строке таблицы
Здравствуйте!

Подскажите пожалуйста как мне обработать событие щелчок мыши на строке таблицы, если у мне заранее не известно сколько строк в данной таблице будет?

У меня есть 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>
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2019, 22:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

addEventListener("click", ({target}) => {
	var tr = target.closest("tbody > tr");
	if(!tr) return;
    var position = tr.querySelector("td:last-child").textContent;
    alert(position)
});
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2019, 23:42
Интересующийся
Отправить личное сообщение для Vladiiimir Посмотреть профиль Найти все сообщения от Vladiiimir
 
Регистрация: 18.05.2019
Сообщений: 19

рони,
Спасибо!
А куда этот слушатель нужно вешать?
Ответить с цитированием
  #4 (permalink)  
Старый 19.05.2019, 00:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Vladiiimir
А куда этот слушатель нужно вешать?
никуда, он уже где нужно. ваша задача сделать строку 5, так как только, вы знаите, что в ней находится.
Ответить с цитированием
  #5 (permalink)  
Старый 19.05.2019, 09:53
Интересующийся
Отправить личное сообщение для Vladiiimir Посмотреть профиль Найти все сообщения от Vladiiimir
 
Регистрация: 18.05.2019
Сообщений: 19

Сообщение от рони Посмотреть сообщение
никуда, он уже где нужно. ваша задача сделать строку 5, так как только, вы знаите, что в ней находится.
А зачем делать 5-ю строку?
Ответить с цитированием
  #6 (permalink)  
Старый 19.05.2019, 10:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Vladiiimir
А зачем делать 5-ю строку?
Сообщение от Vladiiimir
Нужно чтобы при щелчке мыши на строку бралось значение ячейки (geographkoords) из этой ячейки сделано и передавалось в функцию (UpdateGoogleMap). нужно доделать, но нет данных от вас

Последний раз редактировалось рони, 19.05.2019 в 10:08.
Ответить с цитированием
  #7 (permalink)  
Старый 19.05.2019, 10:12
Интересующийся
Отправить личное сообщение для Vladiiimir Посмотреть профиль Найти все сообщения от Vladiiimir
 
Регистрация: 18.05.2019
Сообщений: 19

Сообщение от рони Посмотреть сообщение
Какие данные нужны?
Ответить с цитированием
  #8 (permalink)  
Старый 19.05.2019, 10:18
Интересующийся
Отправить личное сообщение для Vladiiimir Посмотреть профиль Найти все сообщения от Vladiiimir
 
Регистрация: 18.05.2019
Сообщений: 19

Сообщение от рони Посмотреть сообщение
никуда, он уже где нужно. ваша задача сделать строку 5, так как только, вы знаите, что в ней находится.
А, вы имели в виду изменить пятую строку в написанной вами функции?

Там мы должны вызвать функцию UpdateGoogleMap и передать в неё данные из ячейки?
Ответить с цитированием
  #9 (permalink)  
Старый 19.05.2019, 10:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Vladiiimir
Там мы должны вызвать функцию UpdateGoogleMap и передать в неё данные из ячейки?
да, осталось только получить формат данных от вас.
Ответить с цитированием
  #10 (permalink)  
Старый 19.05.2019, 10:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Vladiiimir
<td>${post.geographkoords}</td>
как это выглядит?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Three.js - обработка повторного события на объекте alex.zubkov777@gmail.com Общие вопросы Javascript 1 23.03.2019 19:25
почему не обрабатываются события в динамически добавленых строках таблицы boris2000 Events/DOM/Window 2 10.11.2016 14:04
События мыши ghost666 Events/DOM/Window 6 21.10.2016 11:41
Обработка события click для iframe dqrest Events/DOM/Window 0 22.09.2015 10:17
Обработка события внутри события grifangel Общие вопросы Javascript 6 04.09.2014 12:34