Javascript /定位元素

Question

我有一张桌子和一个隐藏的div。 这是：

CSS检测到div的位置，它是静态的（当我点击任何单元格时它出现在同一个地方）。但我希望每次点击表格的单元格时动态定位div。换句话说，我需要通过单击的单元格显示div。

当然，我可以给出表格＆＃34;位置：亲戚＆＃34;和div＆＃34; position：absolute＆＃34 ;,然后设置div＆＃34; top＆＃34; /＆＃34; bottom＆＃34;和＆＃34;左＆＃34; /＆＃34;右＆＃34;每次我点击一个单元格。但是有没有更容易（=更易读的代码）的代码方式？我必须使用原生Javascript 来解决问题。

UPD！以下是我每次点击单元格时都要使用的代码： ＆＃39;的addEvent＆＃39; =我的div

var cell = document.getElementsByTagName('td');
for (var i=0; i<cell.length; i++) {
cell[i].onclick = function() {
editEvent = document.getElementById('addevent');
editEvent.style.cssText ="display: block; position: absolute; top: 300px; left: 240px;";

};

Answer 1

是的，这可以做到。您只需将position: relative应用于td而不是table，并将弹出窗口设为td的子项。以下示例使用伪元素，但您可以在点击div时轻松使用display:block添加td。

html, body, table {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    padding: 2em;
    box-sizing: border-box;
}

td {
    vertical-align: top;
    padding: 1em;
    border: 1px solid black;
    position: relative;
}

td:hover:before {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    border: 1em solid transparent;
    border-right-color: #C55;
    border-left-width: 0;
}

td:hover:after {
    content: 'test popup';
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: #C55;
    color: white;
    z-index: 1;
    margin-left: 1em;
    padding: 0.5em;
    box-sizing: border-box;
}

<table>
    <tr>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
    </tr>
    <tr>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
    </tr>
    <tr>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
    </tr>
    <tr>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
    </tr>
    <tr>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
    </tr>
</table>