하나의 div로 여러 열이있는 html 테이블 행을 시뮬레이트하는 방법은 무엇입니까?

Question

데이터베이스의 데이터를 테이블에 넣는 웹 페이지를 만들고 있습니다. 각 행에는 3 개의 열이 있습니다. 나는 각 행을 클릭 할 수 있기를 원하지만, 테이블 행을 앵커로 캡슐화 할 수 없으므로 불가능합니다. 몇 가지 해결책이 있지만이 트릭을 건너 뛰고 div를 행으로 사용하고 싶습니다. 각 div에서 3 개의 플로팅 된 인라인 블록 div를 열로 넣어 동일한 결과를 얻을 수 있습니다. 그러나이 예제에서 3 열과 같은 div를 피할 수있는 방법이 있습니까? 일반 HTML 테이블과 같이 세로로 정렬 된 3 개의 텍스트 부분 (증서 열)이있는 각 행에 대해 하나의 div 만 표시됩니까? PHP에서 필사적으로 str_pad를 시도했으며 다른 문제를 해결합니다.

Answer 1

메 메드, 이 시도 ...

[HTML]

<div id="row1" class="rows"> 
<div class="cols col1"></div> 
<div class="cols col2"></div> 
<div class="cols col3"></div> 
<div class="cleaner"></div> 
</div><!--end row1--> 

<div id="row2" class="rows rowsAlt"> 
<div class="col1"></div> 
<div class="col2"></div> 
<div class="col3"></div> 
<div class="cleaner"></div> 
</div><!--end row2--> 

[CSS]

.cleaner{clear: left; line-height: 0; height: 0;} 
.rows{width: 300px; min-height: 25px;} 
.rowsAlt{background-color: blue;} 

.cols{height: 100%; float: left;} 
.col1{width: 25px;} 
.col2{width: 50px;} 
.col3{width: 100px;} 

그런 다음 JQuery와 당신은 다만 수 행 클래스에 클릭 이벤트 아이 요소를 통과하는 ID를 얻습니다. 이렇게하면 전체 행을 클릭 할 수 있습니다. 원하는 경우 열을 사용하여 일을 할 수도 있습니다.

[JQuery와]

$('.rows').live("click", function(){ 
    var thisID = $(this).attr('id'); 

    alert(thisID); 
    //now that you have the id, you can traverse that specific row 
}); 

이