내 테이블 행을 무언가에 대한 링크로 설정할 수 없습니다. CSS와 html 만 사용할 수 있습니다. 나는 div에서 다른 것을 시도했지만 여전히 작동하지 않습니다.

답변

이를 수행하는 두 가지 방법이 있습니다.

자바 스크립트 사용 :

<tr onclick="document.location = 'links.html';">
앵커 사용 :

<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

두 번째 작업은 다음을 사용하여 만들었습니다.

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

열 사이의 데드 스페이스를 제거하려면 다음을 수행하십시오.

table tr td {
    padding-left: 0;
    padding-right: 0;
}

다음은 두 번째 예제의 간단한 데모입니다. DEMO

답변

사용자 지정 jquery 함수를 만들었습니다.

HTML

<tr data-href="site.com/whatever">

jQuery

$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

나를 위해 쉽고 완벽합니다. 도움이되기를 바랍니다.

(나는 OP가 CSS와 HTML만을 원한다는 것을 알고 있지만 jQuery를 고려하십시오)

편집하다

데이터 속성을 사용하여 Matt Kantor와 동의했습니다. 위의 수정 된 답변

답변

지원하는 브라우저를 사용하는 경우 CSS를 사용하여을 <a>테이블 행으로 변환 할 수 있습니다 .

.table-row { display: table-row; }
.table-cell { display: table-cell; }

<div style="display: table;">
    <a href="..." class="table-row">
        <span class="table-cell">This is a TD... ish...</span>
    </a>
</div>

물론 블록 요소를 <a>. 당신은 또한 이것을 일반과 섞을 수 없습니다<table>

답변

테이블 을 사용해야하는 경우 각 테이블 셀에 링크를 넣을 수 있습니다.

<table>
  <tbody>
    <tr>
      <td><a href="person1.html">John Smith</a></td>
      <td><a href="person1.html">123 Fake St</a></td>
      <td><a href="person1.html">90210</a></td>
    </tr>
    <tr>
      <td><a href="person2.html">Peter Nguyen</a></td>
      <td><a href="person2.html">456 Elm Ave</a></td>
      <td><a href="person2.html">90210</a></td>
    </tr>
  </tbody>
</table>

그리고 링크가 전체 셀을 채우도록합니다.

table tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;
}

<div>표 대신 s 를 사용할 수 있다면 HTML이 훨씬 더 간단해질 수 있으며 표 셀 사이의 링크에 “간격”이 생기지 않습니다.

<div class="myTable">
  <a href="person1.html">
    <span>John Smith</span>
    <span>123 Fake St</span>
    <span>90210</span>
  </a>
  <a href="person2.html">
    <span>Peter Nguyen</span>
    <span>456 Elm Ave</span>
    <span>90210</span>
  </a>
</div>

<div>메서드 와 함께 사용되는 CSS는 다음과 같습니다 .

.myTable {
  display: table;
}
.myTable a {
  display: table-row;
}
.myTable a span {
  display: table-cell;
  padding: 2px; /* this line not really needed */
}

답변

일반적인 방법은 요소 의 onClick속성에 일부 JavaScript를 할당하는 것입니다 TR.

JavaScript를 사용할 수 없으면 트릭을 사용해야합니다.

동일한 각 TD행에 동일한 링크를 추가합니다 (링크는 셀에서 가장 바깥 쪽 요소 여야 함).
링크를 블록 요소로 변환 : a { display: block; width: 100%; height: 100%; }

후자는 링크가 전체 셀을 채우도록 강제하므로 아무 곳이나 클릭하면 링크가 호출됩니다.

답변

태그 로 <td>요소를 래핑 할 수는 없지만 이벤트를 <a>사용하여 함수 onclick를 호출하면 유사한 기능을 수행 할 수 있습니다 . 다음 함수와 같은 예가 여기 에 있습니다.

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

그리고 다음과 같이 테이블에 추가하십시오.

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>

답변

sirwilliam의 답변이 가장 적합합니다. 단축키 Ctrl + LeftClick (새 탭에서 페이지 열기)을 지원하여 자바 스크립트를 개선했습니다. 이벤트 ctrlKey는 PC, metaKeyMac 에서 사용됩니다 .

자바 스크립트

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
            window.open(url, '_blank');
            window.focus();
        }
        else if(click == 1){
            window.location.href = url;
        }
        return true;
    }
});

예

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/