时间戳

首页 > 解决方案 > 有没有办法在使用 vanilla JS 的 javascript 生成的表中获取 TD 的值？

javascript - 有没有办法在使用 vanilla JS 的 javascript 生成的表中获取 TD 的值？

问题描述

我有以下代码，它使用 javascript 数组生成一个 HTML 表：

<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 中，我计划将它用于电子应用程序，因此如果可以找到 vanilla JS 中的解决方案将不胜感激，但是如果我需要我可以使用 jQuery，只是不想这样做。

所以基本上，我希望用户能够将鼠标悬停在表格中的一个项目上并将内容输出到控制台，希望在 vanilla JS 中得到答案。

提前致谢... ：）

标签： javascripthtmlhtml-table

解决方案

问题可能是因为当事件处理程序绑定时，表不存在。

您应该使用委托的事件处理程序

使用 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);
});

推荐阅读