如何在 javascript 函数中访问 <td> 的 id

How do I access a <td>'s id in a javascript function?

本文关键字：td id 访问 javascript 函数      更新时间：2023-09-26

如何制作一个 javascript 函数来提醒<td>的 id？我试过了： 

function test() {
  alert(document.documentElement.id); 
}

但这并没有奏效。

基本上，我使用表格在页面上制作一个网格，当我将鼠标悬停在表格的每个单元格上时，我希望函数告诉我单元格的 id。我已经知道onMouseOver是如何工作的以及这些细节，但我似乎无法使该功能工作。

您可以将单个侦听器放在桌子上：

<table onmouseover="showId(event);" ...>

然后在函数中显示鼠标悬停在表上冒泡的任何 TD 元素的 ID：

function showId(evt) {
  var element = evt && (evt.target || evt.srcElement);
  if (element && element.tagName && element.tagName.toLowerCase() == 'td') {
    console.log(element.id);
  }
}

您可以动态附加侦听器，但对于旧版浏览器，您可能需要处理一些小的浏览器怪癖。 例如，以下内容可以在任何正在使用的浏览器中工作（该表具有用于附加侦听器的 ID，但还有其他不需要 ID 的方法）：

<table id="t0">
  ...

window.onload = function() {
  var table = document.getElementById('t0');
  table.onmouseover = showId;
}
function showId(evt) {
  evt = evt || window.event;
  var element = evt && (evt.target || evt.srcElement);
  if (element && element.tagName && element.tagName.toLowerCase() == 'td') {
    alert(element.id);
  }
}

你需要做这样的事情：

function test() {
    var idItem = document.getElementById('id'); 
    alert(idItem);
}
test();

如果您知道id，但是我做了一个例子来显示每个单元格的id

<!DOCTYPE html>
<html>
<head>
    <title>td mouseover</title>
    <script type="text/javascript">
    window.document.addEventListener('DOMContentLoaded',function(){
        var cells = document.getElementsByTagName('td');
        function showId(evt){
            alert(evt.target.id)
        }

        for(var i = 0; i < cells.length;i++){
            cells[i].addEventListener('mouseover',showId);
        }

    });

    </script>
</head>
<body>
    <table>
            <tr>
                <td id="cell1">Something 1</td>
                <td id="cell2">Something 2</td>
                <td id="cell3">Something 3</td>
            </tr>
    </table>
</body>
</html>
相关文章：