有没有一种方法可以在javascript和vanilla JS生成的表中获取TD的值？_Javascript_Html_Html Table

有没有一种方法可以在javascript和vanilla JS生成的表中获取TD的值？

javascript html

有没有一种方法可以在javascript和vanilla JS生成的表中获取TD的值？,javascript,html,html-table,Javascript,Html,Html Table,我有以下代码，它使用javascript数组生成HTML表： <HTML lang='en'> <head> <style> table { border-collapse: collapse; } table tr td { border: 1px solid #000;

我有以下代码，它使用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>

这个解决方案有两个问题：

它不起作用，它似乎只将单元格的内容输出到行的最左边

这是在jQuery中，我计划将其用于一个电子应用程序，因此如果能找到vanilla JS中的解决方案，我将不胜感激，但是如果我需要，我可以使用jQuery，只是不愿意

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

提前感谢……：）

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

您应该使用处理程序

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

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

您应该使用处理程序

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

这里有一种方法。创建表后运行此代码（它可以紧跟在

document.getElementById（“container”）.innerHTML=html；

）

说明：

```
getElementsByTagName（）
```
返回文档中
的集合。（为此，您还可以使用
```
document.querySelectorAll（'tr'）
```
，它允许您使用类似jQuery的CSS选择器来查找元素。）
```
Array.from
```
将上一次调用返回的集合转换为常规JS数组，允许我们对其调用
```
forEach
```
我们使用
```
addEventListener
```
来附加一个回调函数，当
悬停在上方时，该函数将触发。这是
回调中的
```
事件
```
参数包含有关鼠标悬停事件的信息
用户光标指向的立即元素是
```
event.target
```
。这为我们提供了用户光标所在的
。这一部分有点微妙，但基本上，您可以将侦听器附加到父元素（
），当鼠标移到子元素（
）上时，将调用侦听器。实际上，您不必单独向每个单元格添加侦听器。搜索“event bubbling”（事件冒泡）以获取有关其工作原理的完整解释。）
的
```
textContent
```
属性提供单元格内的文本。这是DOM的标准属性

document.getElementById（“container”）.innerHTML=html；

```
getElementsByTagName（）
```
返回文档中
的集合。（为此，您还可以使用
```
document.querySelectorAll（'tr'）
```
，它允许您使用类似jQuery的CSS选择器来查找元素。）
```
Array.from
```
将上一次调用返回的集合转换为常规JS数组，允许我们对其调用
```
forEach
```
我们使用
```
addEventListener
```
来附加一个回调函数，当
悬停在上方时，该函数将触发。这是
回调中的
```
事件
```
参数包含有关鼠标悬停事件的信息
用户光标指向的立即元素是
```
event.target
```
。这为我们提供了用户光标所在的
。这一部分有点微妙，但基本上，您可以将侦听器附加到父元素（
），当鼠标移到子元素（
）上时，将调用侦听器。实际上，您不必单独向每个单元格添加侦听器。搜索“event bubbling”（事件冒泡）以获取有关其工作原理的完整解释。）
的
```
textContent
```
属性提供单元格内的文本。这是DOM的标准属性

$（文档）.ready（函数（）{
$（“#容器表”）。on（'mouseenter'，'tr'，function（）{
var tdVal=$（this.children（'td'）.text（）；
console.log（tdVal）；
}
});

$（文档）.ready（函数（）{
$（“#容器表”）。on（'mouseenter'，'tr'，function（）{
var tdVal=$（this.children（'td'）.text（）；
console.log（tdVal）；
}
});

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

document.getElementById("container").innerHTML = html;
setListeners();

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

document.getElementById("container").innerHTML = html;
setListeners();