자바 스크립트/요소 배치

Question

테이블과 숨겨진 div가 있습니다. 는 여기있다 :

DIV의 위치가 CSS에 의해 발견, 그것은 (내가 어떤 셀을 클릭 할 때 같은 장소에 나타납니다) 정적이다. 하지만 테이블의 셀을 클릭 할 때마다 div가 동적으로 배치되기를 바랍니다. 즉, 클릭 한 셀에 div가 나타나야합니다.

물론 "position : relative"테이블과 div "position : absolute"테이블을 제공하고 클릭 할 때마다 div의 "top"/ "bottom"및 "left"/ "right"를 설정할 수 있습니다. 셀에. 그러나 더 쉬운 (= 더 읽기 쉬운 코드) 코드 방법이 있습니까? 이 문제를 해결하려면 네이티브 Javascript ONLY을 사용해야합니다.

UPD! 여기에 셀을 클릭 할 때 나는 모든 시간을 사용하는 가정의 코드는 다음과 같습니다 'addevent'= 내 사업부

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

네, 할 수 있습니다. table 대신 position: relative을 td에 적용하고 팝업을 td의 하위로 설정하기 만하면됩니다. 다음 예제에서는 의사 요소를 사용하지만 display:block을 클릭하면 td에 쉽게 추가 할 수 있습니다. div을 사용할 수 있습니다.

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>