Есть ли способ получить значение TD в таблице, сгенерированной в javascript с помощью vanilla JS? - PullRequest
Новая
       3

Есть ли способ получить значение TD в таблице, сгенерированной в javascript с помощью vanilla JS?

0 голосов
/ 26 января 2020

У меня есть следующий код, он генерирует таблицу HTML с использованием массива javascript: 

<HTML lang='en'>
    <head>
        <style>
            table {
                border-collapse: collapse;
            }
            table tr td {
                border: 1px solid #000;
                padding: 10px;
            }
            table tr td:hover {
                color: red;
            }        

        </style>

    </head>
    <body>

        <div id="container"></div>

        <script>
            window.addEventListener("load", function(){
                var data = ["doge", "cate", "birb", "doggo", "moon", "awkward", "coool", "epic"];
                var perrow = 3,
                    html = "<table><tr>";
                for (var i=0; i<data.length; i++) {
                    html += "<td class=\".cell\" >" + data[i] + "</td>";
                    var next = i+1;
                    if (next%perrow==0 && next!=data.length) {
                    html += "</tr><tr>";
                    }
                }
                html += "</tr></table>";

                document.getElementById("container").innerHTML = html;
            });
        </script>
    </body>
</HTML>

Это прекрасно работает. Я хотел бы, чтобы пользователь мог навести курсор на любой элемент в таблице и записать в него значение элемента таблицы на консоли.

Я искал решения и нашел только тот, который работает: 

$(document).ready(function(){
    $('tr').mouseover(function(){
        var valueOfTd = $(this).find('td:first-child').text();
            console.log(valueOfTd);

        });
});

У меня есть две проблемы с этим решением:

  1. Это не работает, кажется, только выводит содержимое ячейки в далеко слева от ряда
  2. Это в jQuery, я планирую использовать это для электронного приложения, поэтому было бы очень полезно, если бы было найдено решение в ванили JS, однако, если мне нужно чтобы я мог использовать jQuery, просто предпочел бы не.

Поэтому я бы хотел, чтобы пользователь мог навести курсор на элемент в таблице и вывести содержимое на консоль. , хотел бы ответ в ванили JS.

Заранее спасибо ...:)

Ответы [ 4 ]

1 голос
/ 26 января 2020

Вот один из подходов. Запустите этот код после создания таблицы (он может go сразу после document.getElementById("container").innerHTML = html;). 

var rows = document.getElementsByTagName('tr');
Array.from(rows).forEach(function(tr) {
    tr.addEventListener('mouseover', function(event) {
        console.log(event.target.textContent);
    });
});

Объяснение:

  • getElementsByTagName() возвращает коллекцию <TR> в документе. (Для этого вы также можете использовать document.querySelectorAll('tr'), что позволяет использовать jQuery -подобные CSS селекторы для поиска элементов.)
  • Array.from превращает коллекцию, возвращенную предыдущим вызовом, в обычный JS Массив, позволяющий нам вызывать forEach для него.
  • Мы используем addEventListener, чтобы присоединить функцию обратного вызова, которая срабатывает при наведении <TR>. Это vanilla JS привязка события .
  • Параметр event внутри обратного вызова содержит информацию о событии mouseover.
  • Непосредственный элемент, на который нацеливается курсор пользователя, - event.target. Это дает нам <TD>, что курсор пользователя находится над. Эта часть немного тонкая, но в основном вы можете присоединить слушателей к родительскому элементу (<TR> s), и слушатель будет вызван, когда наложен дочерний элемент (<TD>). Вам не нужно добавлять слушателей в каждую ячейку отдельно. Ищите «всплывающие события» для полного объяснения того, как это работает.)
  • textContent свойство <TD> дает текст внутри ячейки. Это стандартное свойство DOM Node API .
1 голос
/ 26 января 2020

проблема, вероятно, заключается в том, что, когда обработчик событий связывается, таблица не существует.

Вы должны использовать делегированное событие обработчик

с jQuery : 

$('#container').on('mouseover', 'tr', function(){
    var valueOfTd = $(this).find('td:first-child').text();
    console.log(valueOfTd);
});

с простой javascript: 

var container = document.getElementById('container');
container.addEventListener('mouseover', function(event) {
    var target = event.target.closest('tr');
    if (! target) return;

    var valueOfTd = target.querySelector('td:first-child').innerText;
    console.log(valueOfTd);
});
0 голосов
/ 26 января 2020

Вы можете использовать следующий метод 

function setListeners() {
  let tds = document.querySelectorAll('td');
  tds.forEach((td) => {
    td.addEventListener('mouseover', (e) => {
      console.log(e.target.innerHTML);
    });
  })
}

и вызывать этот метод после установки внутреннего контейнера HTML

document.getElementById("container").innerHTML = html;
setListeners();
0 голосов
/ 26 января 2020

Попробуйте это. 

$(document).ready(function() {
    $("#container table").on('mouseenter', 'tr', function () {
        var tdVal = $(this).children('td').text();
        console.log(tdVal);
    }
});
...