클릭 가능한 열이있는 HTML 표 만들기

Question

열을 선택할 수있는 HTML 표를 만들겠습니다. 예를 들어 위에 올리면 강조 표시되고 클릭하면 새 페이지로 리디렉션됩니다. 예를 들어 다섯 번째 열을 클릭하면 column.aspx?col=5으로 이동합니다. 문제는

는 HTML 테이블 행에서 작동 :

<tr><td>...</td></tr> 그래서 내가 대, 행을 표현하기 위해 <span>들 열과 아이를 표현하기 위해 떠 <a>들과 함께이 달성 사이에 심의 table를 사용하여 달성하고 있습니다 jQuery로 원하는 효과.

어느 쪽이 더 좋을까요? 아니면 고려해야 할 또 다른 해결책이 있습니까? 제발 조언. 당신이 jQuery를 사용하여이 작업을 수행하려면

Answer 1

당신은 쉽게 각 td에 click 및 mouseover 이벤트를 바인딩 할 수 있습니다 jQuery.

$("table-selector tr td").each(function(){ 
    $(this).click(function(){ 
     // TODO with click 
    }).hover(function(){ 
     // TODO with mouseover 
    },function(){ 
     // TODO with mouseout 
    }); 
} 

UPDATE : 셀 인덱스 및 행 인덱스를 분리하고 각 td의 데이터로서 테마 저장 :

$("#myTable tr").each(function(r){ 
    var row = r; 
    $("td", this).each(function(d){ 
     var cell = d; 
     $(this) 
      .data("rowIndex", row) 
      .data("cellIndex", cell) 
      .click(function(){ 
        $("#message").text("Row-Index is: " + $(this).data("rowIndex") + 
             " and Cell-Index is: " + $(this).data("cellIndex")); 
       }) 
      .hover(
       function(){ 
        $(this).addClass("td-over").css({"text-align":"center"}); 
       },function(){ 
        $(this).removeClass("td-over").css({"text-align":"left"}); 
      }); 
    }); 
}); 

See the full-demo here at jsfiddle

Answer 2

, 당신은 사용 열의 모든 <td />의를 선택할 수 있습니다 (두 개 이상의 열을 걸쳐 <td />의가없는 가정) :nth-child()-Selector.

테이블의 두 번째 열을 대상으로 지정하는 예는 this fiddle을 참조하십시오.

자바 스크립트 접근 방식의 단점은 자바 스크립트가 활성화되어 있어야한다는 것입니다.

Answer 3

나는 그것이 당신의 목표 시장에 달려 있다고 생각합니다. JavaScript를 사용하지 않고 사용자에 대한 걱정없이 JavaScript를 사용할 수 있다면 JavaScript를 사용하는 것입니다.

또한 HTML 노이즈를 추가 할 필요가 없으므로 가장 깨끗하게 될 것입니다. 당신은 그냥 지나갈 것입니다.

Answer 4

이 나는 ​​기존의 jQuery 테이블 솔루션을 사용하는 것입니다,하지만 당신은 단지 열을 클릭 감지하려는 경우, 당신은 할 수 있습니다 : http://jsfiddle.net/rkw79/PagTJ/

$('table').delegate('td','click',function() { 
    alert('column ' + $(this).index()); 
}); 

Answer 5

(1) 인 경우 동적 링크 당신이 말하고있는, 그 다음 jQuery.

(2) 그렇지 않으면 전 span 태그에서 앵커 링크에 대한 아이디어를 전적으로지지하고 CSS로 작업하십시오.

가능한 경우 자바 스크립트를 자릅니다. 이렇게하면로드 시간 (일반적으로)을 줄이고 자바 스크립트가 활성화되지 않은 사용자 (또는 오래된 브라우저를 사용하는 사용자)에게 도달하게됩니다. ? col = 1에서? col = 5까지의 링크를 만들 수 있다면 그렇게하십시오. 그렇게 어렵지 않습니다.

<?php 
for($i=0;$i<200;$i++){ 
echo '<span><a href="?col=' . $i . '">link</a></span>'; 
} 
?> 

: 예를 들면 : -

당신은 열이 많은 경우

또 다른 옵션은, 너무 거기에 약간의 PHP를 통합하고 링크 태그에 모든 숫자를 출력 루프를 실행하는 것입니다

Answer 6

당신과 같이 자바 스크립트 onclick 이벤트를 사용할 수 있습니다

<td onclick="window.location='column.aspd?col=5'">...</td> 

또는

<td onclick="myFunction(this)">...</td> 

자세한 사용자 정의 기능.

각 열의 맨 위에있는 셀을 클릭하려는 것인지 모르겠지만 전체 열에 대해이 작업을 수행하려는 경우이 이벤트를 열의 각 셀에 추가 할 수 있습니다.

Answer 7

다음 HTML

<table> 
    <thead> 
     <td>1</td> 
     <td>2</td> 
    </thead>  
    <tbody> 
     <td>google</td> 
     <td>fb</td> 
    </tbody> 
</table> 

JQuery와

$("thead td").click(function(){ 

console.log($(this).index()); 
    var index=$(this).index(); 
    console.log("column.aspx?col="+(index+1)); 
    //location.href="column.aspx?col="+(index+1); 
}); 

http://jsfiddle.net/jtDP8/4/

Answer 8

제임스가, 이것은 당신이 무엇을 요구한다. 강조 표시된 열 효과를 얻기 위해 테이블이있는 페이지에서이 코드를 삭제할 수 있습니다. 이 솔루션은 기존 코드와 호환되므로 내 자신의 사용자 정의 테이블과 같은 구조를 만드는 것과는 대조적으로 사용할 수 있습니다. 표 형식의 데이터가 속한 곳에 표시 될 수 있으며 jQuery는 몇 줄의 코드에서 많은 부담을 덜어줍니다 .

<style type="text/css"> 
    .columnhover {background-color: yellow;} 
</style> 

<script type="text/javascript"> 
/* <![CDATA[ */         
    $(document).ready(function($) 
    { 
     $('tr th,td').hover(function() 
     { 
      var columnNum = $(this).parent('tr').children().index($(this)); 
      var $wholeColumn = $(this).parents('table').find('td:nth-child(' + (columnNum + 1) + ')'); 
      $wholeColumn.addClass('columnhover'); 
     }, 
     function() 
     { 
      $('table').find('td').removeClass('columnhover'); 
     }); 

     $('tr th,td').click(function() 
     { 
      var columnNum = $(this).parent('tr').children().index($(this)); 
      window.location = "test.html?column=" + (columnNum + 1); 
     }); 
    }); 
/* ]]> */ 
</script>