Question

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

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

但那没用。

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

Answer 1

您可以在表格中放置一个监听器：

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

Answer 2

你需要做这样的事情：

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>

如何在javascript函数中访问id？

2 个答案: