在现有元素旁边放置一个新元素

Question

我正在做一个网站。我想要一个表格，当我点击一个单元格时，一个“窗口”将出现在单元格的正下方。正如我现在所做的那样，我将单元格的 ID 作为参数传递给 myFunction()。然后搜索哪个，以便我可以使用该元素并找到它的位置。我觉得这是一种非常糟糕的做法。我得到了我想要的结果，但必须将 ID 作为硬编码参数传递似乎很脆弱。

<td id="player 1" onclick="myFunction('player 1')">

function myFunction(id_name) {

    var element = document.getElementById(id_name);

    var tmp = element.getBoundingClientRect();

    x_pos = tmp['x'];

    y_pos = tmp['y'];

    height = tmp['height']

    var dr = document.getElementById("myDropdown");

    dr.style.position = "absolute";

    dr.style.left = x_pos+'px'

    dr.style.top = y_pos+height+'px'

    dr.classList.toggle("show");

}

Answer 1

您可以将事件传递给您的函数，而不是硬编码的字符串 ID。onclick="myFunction(event)"更改函数的定义以接受事件function&nbsp;myFunction(e)事件对象将包含有关引发事件的元素（目标）的信息。Event.target对事件最初调度到的目标的引用。