Javascript-форум - Обработка события щелчка мыши на строке таблицы

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Обработка события щелчка мыши на строке таблицы (https://javascript.ru/forum/xhtml-html-css/77552-obrabotka-sobytiya-shhelchka-myshi-na-stroke-tablicy.html)

Цитата:

Сообщение от рони (Сообщение 507976)

да, осталось только получить формат данных от вас.

Только до меня всё равно не доходит, где этот обработчик должен быть прописан?
Формат данных такой как указал здесь в примере:

<html>
<head>
    <title>Главная страница</title>
    <style>
        #map {
            height: 50%;
        }
        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=AIzaSyCWH__g2XMzhes7PIk-8v2MbBSZTgMnBSg&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>1</td>
                <td>г.Самара</td>
                <td>2</td>
                <td>55.09 52.07</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

</div>
<div id="map"></div>

</body>
</html>

Vladiiimir,
ждите...

Vladiiimir,
проверьте

<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: 'Это здесь'
            });
        };

    addEventListener("click", ({target}) => {
    var tr = target.closest("tbody > tr");
    if(!tr) return;
    var position = tr.querySelector("td:last-child").textContent;
    position = position.split(/\s+/).map(Number);
    UpdateGoogleMap(...position)
    });

    </script>

Цитата:

Сообщение от Vladiiimir

marker=new google.maps.marker({

new google.maps.Marker

Цитата:

Сообщение от рони (Сообщение 507982)

Vladiiimir,
проверьте

Слушатель срабатывает, но судя по отладчику googlehrome в функцию UpdateGoogleMap передаётся пустое значение (переменная position)https://drive.google.com/open?id=1BH...9x9Fp_m_HWaLOD

Можете прокомментировать, что значит переменная target?
Что мы делаем в строках:

var position = tr.querySelector("td:last-child").textContent;
        position = position.split(/\s+/).map(Number);

Vladiiimir,
вы поменяли расположение ячейки с данными!!!
сделайте ячейке класс например <td class="geo">55.09 52.07</td>
и тогда

var position = tr.querySelector("td.geo").textContent;

Vladiiimir,
или так

var position = tr.querySelector("td:nth-child(4)").textContent;

Цитата:

Сообщение от рони (Сообщение 507990)

var position = tr.querySelector("td.geo").textContent;

Работает! Громадная благодарность!

А можно вот как мы сделали привязку к ячейке <td class="geo">55.09 52.07</td>, аналогично сделать привязку слушателя к таблице?

Цитата:

Сообщение от Vladiiimir

А можно вот как мы сделали привязку к ячейке <td class="geo">55.09 52.07</td>, аналогично сделать привязку слушателя к таблице?

не понимаю вопроса, можно подробнее?

Цитата:

Сообщение от рони (Сообщение 507994)

не понимаю вопроса, можно подробнее?

Если у меня на странице добавится ещё одна таблица, то этот слушатель ведь будет реагировать и на щелчки по 2-ой таблицы?