Bootstrap을 사용하고 있으며 다음이 작동하지 않습니다.

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>

저자의 노트 I :

아래의 다른 답변, 특히 jquery를 사용하지 않는 답변을 살펴보십시오.

저자의 노트 II :

후손을 위해 보존되었지만 2020 년 에는 틀림없이 잘못된 접근법이었습니다. (2017 년에도 비 관용적이었습니다.)

원래 답변

부트 스트랩을 사용하고 있습니다. 즉 jQuery : ^)를 사용하고 있다는 것을 의미하므로 한 가지 방법은 다음과 같습니다.

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

물론 href 또는 스위치 위치를 사용할 필요가 없으며 클릭 핸들러 기능에서 원하는 모든 작업을 수행 할 수 있습니다. jQuery처리기를 작성하고 작성하는 방법을 읽으십시오 .

사용의 장점 클래스 를 통해 ID가 여러 행에 솔루션을 적용 할 수 있습니다 :

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

코드베이스는 변경되지 않습니다. 동일한 핸들러가 모든 행을 처리합니다.

다른 옵션

콜백에서 다음과 같이 Bootstrap jQuery 콜백을 사용할 수 있습니다 document.ready.

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

이것은 테이블 정렬시 재설정되지 않는 이점이 있습니다 (다른 옵션에서 발생 함).

노트

이것은 게시 window.document.location되었으므로 window.location대신 사용되지 않거나 (최소 더 이상 사용되지 않음) 사용 됩니다.

당신은 그렇게 할 수 없습니다. 유효하지 않은 HTML입니다. <a>a <tbody>와 a 사이에를 넣을 수 없습니다 <tr>. 대신 이것을 시도하십시오 :

<tr onclick="window.location='#';">
        ...
     </tr>

포인터보기를위한 스타일 추가

[data-href] { cursor: pointer; }

작업을 수행 할 때 JavaScript를 사용하여 HTML 외부에 클릭 핸들러를 지정하려고합니다.

every 안에 앵커를 포함시킬 수 있습니다 <td>.

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

그런 다음 display:block;앵커를 사용하여 전체 행을 클릭 가능하게 만들 수 있습니다.

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

jsFiddle 예제입니다.

JavaScript에 의존하지 않는 한 이것은 아마도 당신이 얻는 것만 큼 최적입니다.

연결된 테이블 행이 가능하지만 표준 <table>요소로 는 불가능 합니다. display: table스타일 속성을 사용하여 수행 할 수 있습니다 . 여기 와 여기 에 설명 할 바이올린이 있습니다.

이 코드는 트릭을 수행해야합니다.

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
}

.row:hover {
  background-color: #cccccc;
}

.cell:hover {
  background-color: #e5e5e5;
}

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />

<div role="grid" class="table">
  <div role="row" class="row">
    <div role="gridcell" class="cell">
      1.1
    </div>
    <div role="gridcell" class="cell">
      1.2
    </div>
    <div role="gridcell" class="cell">
      1.3
    </div>
  </div>

  <a role="row" class="row" href="#">
    <div role="gridcell" class="cell">
      2.1
    </div>
    <div role="gridcell" class="cell">
      2.2
    </div>
    <div role="gridcell" class="cell">
      2.3
    </div>
  </a>
</div>

표준 <table>요소가 사용되지 않으므로 적절한 액세스 가능성을 보장하기 위해 ARIA 역할이 필요합니다 . role="columnheader"해당되는 경우 와 같이 추가 역할을 추가해야 할 수도 있습니다 . 자세한 내용은 여기를 참조하십시오.

다음과 같이 표준 부트 스트랩 4.3 이상을 사용하여 달성했습니다-jQuery 또는 추가 CSS 클래스가 필요하지 않습니다!

핵심은 stretched-link셀 내의 텍스트 에 사용 <tr>하고 포함 블록으로 정의하는 것입니다.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
  <tbody>
    <tr style="transform: rotate(0);">
    <th scope="row"><a href="#" class="stretched-link">1</a></th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

transform값을 포함하지 않는 값으로 설정 하는 것과 같이 다른 방법으로 포함 블록을 정의 할 수 있습니다 (위의 예와 같이).

자세한 내용은 Bootstrap 설명서 를 참조하십시오 stretched-link.

훨씬 유연한 솔루션은 data-href 속성을 사용하여 무엇이든 타겟팅하는 것입니다. 이것은 다른 장소에서 쉽게 코드를 재사용 할 수 있다는 것입니다.

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

그런 다음 jQuery에서 해당 속성을 가진 모든 요소를 ​​타겟팅하십시오.

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

그리고 CSS 스타일을 잊지 마십시오 :

[data-href] {
    cursor: pointer;
}

이제 모든 요소에 data-href 속성을 추가하면 작동합니다. 이와 같은 스 니펫을 작성할 때 유연성이 좋았습니다. 바닐라 js 솔루션이 있으면 자유롭게 추가하십시오.

이 부트 스트랩 구성 요소를 사용할 수 있습니다.

http://jasny.github.io/bootstrap/javascript/#rowlink

재 스니 부트 스트랩

선호하는 프론트 엔드 프레임 워크를위한 누락 된 구성 요소.

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

용법

데이터 속성을 통해

또는 요소에 클래스 .rowlink및 속성 data-link="row"을 추가하십시오 . 다른 옵션 의 경우 셀에 클래스를 추가하여 셀을 제외 할 수있는 것처럼 데이터에 이름을 추가하십시오 .<table><tbody>data-target="a.mainlink".rowlink-skip<td> .

JavaScript를 통해

자바 스크립트를 통해 입력 마스크를 호출합니다.

$('tbody.rowlink').rowlink()

<a>내부적 으로 태그 를 사용하여 기술적으로 태그 를 작성하는 좋은 방법 <tr>이 있습니다. 이는 의미 상 올바르지 않을 수도 있지만 (브라우저 경고를 표시 할 수도 있음) JavaScript/jQuery필요 하지 않은 작업으로 작동 합니다.

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

추신 : 여기의 요령은 <a>마지막 요소로 태그 를 넣는 것입니다. 그렇지 않으면 첫 번째 공간을 차지하려고 시도합니다.<td> 셀 .

PPS : 이제 전체 행을 클릭 할 수 있으며이 링크를 사용하여 새 탭에서도 열 수 있습니다 (Ctrl / CMD + 클릭)

tr에서 onclick javascript 메소드를 사용하여 클릭 가능하게 만들 수 있습니다. 또한 세부 사항으로 인해 링크를 작성 해야하는 경우 javascript에서 함수를 선언하고 onclick에서 호출하여 일부 값을 전달할 수 있습니다.

다음은 테이블 행 위에 투명한 A 요소를 배치하는 방법입니다. 장점은 다음과 같습니다.

• 마우스 포인터로 포인터를 변경하면 상태 표시 줄에 대상 링크가 표시되고 키보드를 탐색하거나 새 탭이나 창에서 열 수 있으며 URL을 복사 할 수 있습니다
• 표는 링크를 추가하지 않은 것과 동일하게 보입니다.
• 테이블 코드 자체에는 변화가 없습니다

단점 :

• A 요소의 크기는 작성시 및 행의 크기를 변경 한 후에 스크립트에서 설정해야합니다 (그렇지 않으면 JavaScript없이 수행 할 수 있음). HTML 또는 CSS로)

테이블은 그대로 유지됩니다.

<table id="tab1">
<tbody>
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
</tbody>
</table>

첫 번째 열에 A 요소를 삽입하고 필요한 속성을 설정하여 jQuery JavaScript를 통해 각 행에 대한 링크를 추가하십시오.

// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');// debug: .css('background-color', '#f11');
    // insert the <A> element
    var myA=$('<A>');
    $(this).append(myA);
    var myheight=$(this).height();

    myA.css({//"border":'1px solid #2dd', border for debug only
            'display': 'block',
            'left': '0',
            'top': '0',
            'position':  'absolute'
        })
        .attr('href','the link here')
        .width(mywidth)
        .height(myheight)
        ;
    });

패딩과 여백을 많이 사용하는 경우 너비와 높이 설정이 까다로울 수 있지만 일반적으로 몇 픽셀을 제거해도 문제가되지 않습니다.

라이브 데모 : http://jsfiddle.net/qo0dx0oo/ (Firefox에서는 작동하지만 IE 또는 Chrome에서는 작동하지 않으며 링크 위치가 잘못되었습니다)

Chrome 및 IE 용으로 수정되었습니다 (여전히 FF에서도 작동 함) : http://jsfiddle.net/qo0dx0oo/2/

버튼 행을 테이블 행에 추가하면 부트 스트랩이 CSS 변경없이 커서를 변경합니다. 코드를 거의 사용하지 않고 행을 쉽게 클릭 할 수 있도록하는 방법으로이 역할을 사용하기로 결정했습니다.

HTML

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

동일한 원리를 적용하여 모든 버튼에 버튼 역할을 추가 할 수 있습니다.

이 코드는 전체 테이블을 클릭 가능하게 만듭니다. 이 예제에서 링크를 클릭하면 링크를 따르지 않고 경고 대화 상자에 링크가 표시됩니다.

HTML :

위 예제 뒤에있는 HTML은 다음과 같습니다.

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

CSS

그리고 CSS :

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

jQuery

그리고 마지막으로 마술을 일으키는 jQuery :

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

행을 클릭하면 앵커에 속한 href에 대한 검색이 수행됩니다. 하나를 찾으면 창의 위치가 해당 href로 설정됩니다.

뷰와 컨트롤러가 분리되어 URL을 하드 코딩 할 필요가 없으며 클릭으로 달성 해야하는 모든 것을 클릭 할 때 매우 쉬운 옵션은 클릭 한 번으로 사용하는 것입니다. . Angular ng-click 과도 작동합니다.

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

여기서 일 하기

여기 간단한 해결책이 있습니다 ..

<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>

, CSS 위치 및 일부 jQuery 또는 JS를 사용하는<a> 또 다른 옵션 :

HTML :

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS :

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

그런 다음 jQuery와 같이 너비를 지정해야합니다.

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });

나는 누군가가 이미 거의 똑같이 썼다는 것을 알고 있지만, 내 방법은 올바른 방법이며 (div는 A의 자식이 될 수 없음) 클래스를 사용하는 것이 좋습니다.

CSS를 사용하여 테이블을 모방하고 A 요소를 행으로 만들 수 있습니다

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

CSS :

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}

나는 onclick=""초보자를 위해 사용하고 이해하기 쉽기 때문에 속성 을 사용하는 것을 선호합니다.

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>

허용되는 답변은 훌륭하지만 모든 tr에서 URL을 반복하지 않으려는 경우 작은 대안을 제안합니다. 따라서 URL이 아닌 href를 테이블 data-url에 넣습니다.

<table data-click data-url="href://blah">    
    <tbody>
        <tr id ="2">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
        <tr id ="3">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
    </tbody>
    </table

jQuery(document).ready(function($) {
    $('[data-click] tbody tr').click(function() {
        var url = $(this).closest('table').data("url");
        var id = $(this).closest('tr').attr('id');
        window.location = url+"?id="+id);
    });
});

또한 모든 tr에 클릭 데이터 속성을 추가 할 필요가 없기 때문에 좋습니다. 또 다른 좋은 점은 클래스가 실제로 스타일링에만 사용해야하므로 클래스를 사용하여 클릭을 유발하지 않는다는 것입니다.

앞에서 언급하지 않은 한 가지 해결책은 셀에서 단일 링크를 사용하고 일부 CSS를 사용하여이 링크를 셀 위로 확장하는 것입니다.

table {
  border: 1px solid;
  width: 400px;
  overflow: hidden;
}

tr:hover {
  background: gray;
}

tr td {
  border: 1px solid;
}

tr td:first-child {
  position:relative;
}

a:before {
  content: '';
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  width: 400px;
}

<table>
  <tr>
    <td><a href="https://google.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr>
    <td><a href="https://stackoverflow.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
</table>

<tbody>
    <tr data-href='www.bbc.co.uk'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr data-href='www.google.com'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

<script>
    jQuery(document).ready(function ($) {
        $('[data-href]').click(function () {
            window.location = $(this).data("href");
        });
    });
</script>

여기에있는 주요 솔루션은 훌륭하지만 내 솔루션은 수업이 필요하지 않습니다. URL과 함께 data-href 속성을 추가하기 만하면됩니다.

이 문제를 해결하기 위해 많은 시간을 투자했습니다.

세 가지 접근 방식이 있습니다.

1. JavaScript를 사용하십시오. 확실한 단점 : 기본적으로 새 탭을 열 수 없으며 행 위에 마우스를 올리면 일반 링크와 같이 상태 표시 줄에 표시가 없습니다. 접근성도 문제입니다.

2. HTML / CSS 만 사용하십시오. 이것은 <a>각각 아래 에 중첩을 두는 것을 의미 합니다 <td>. 이 바이올린 과 같은 간단한 접근 방식은 작동하지 않습니다. 클릭 가능한 표면 이 각 열에 대해 반드시 같을 필요는 없기 때문입니다. 이것은 심각한 UX 문제입니다. 또한 <button>행에 필요한 경우 아래에 중첩하는 것이 유효한 HTML이 아닙니다.<a> 태그 (브라우저에는 문제가 없지만).

   이 접근법을 구현하는 3 가지 다른 방법을 찾았습니다. 먼저 괜찮습니다, 다른 두 사람은 위대하지 않습니다.

   a) 이 예제를 살펴보십시오 .

   tr {
     height: 0;
   }
   
   td {
     height: 0;
     padding: 0;
   }
   
   /* A hack to overcome differences between Chrome and Firefox */
   @-moz-document url-prefix() {
     td {
       height: 100%;
     }
   }
   
   a {
     display: block;
     height: 100%;
   }

   작동하지만 Chrome과 Firefox의 불일치로 인해 차이점을 극복하려면 브라우저 별 해킹이 필요합니다. 또한 Chrome은 항상 셀 내용을 맨 위에 정렬하므로 특히 줄 높이가 다양한 경우 긴 텍스트에 문제가 발생할 수 있습니다.

   b) 설정 <td>에{ display: contents; } . 다른 두 가지 문제가 발생합니다.

   b1. 다른 사람이 <td>태그 설정과 같이 직접 스타일을 지정하려는 경우 { width: 20px; }해당 스타일을<a> 지정 태그 . Javascript 대안보다 더 많은 마법을 사용해야 할 수도 있습니다.

   b2. { display: contents; }아직 실험 중입니다. 특히 Edge에서는 지원되지 않습니다.

   C) 설정 <td>에 { height: --some-fixed-value; }. 이것은 충분히 유연하지 않습니다.

3. 내가 진지하게 생각하는 마지막 방법 은 클릭 가능한 행을 전혀 사용하지 않는 것 입니다. 클릭 가능한 행은 훌륭한 UX 환경이 아닙니다. 시각적으로 클릭 가능한 것으로 표시하기가 쉽지 않으며 버튼과 같이 행 내에서 여러 부분을 클릭 할 수있는 경우 문제가 발생합니다. 따라서 가능한 대안은 <a>첫 번째 열에 만 태그를 지정하여 일반 링크로 표시하고 전체 행을 탐색하는 역할을하는 것입니다.

다른 방법이 있습니다 ...

HTML :

<table>
<tbody>
       <tr class='clickableRow'>
       <td>Blah Blah</td>
       <td>1234567</td>
       <td>£158,000</td>
        </tr>
</tbody>
</table>

jQuery :

$(function() {
      $(".clickableRow").on("click", function() {
          location.href="http://google.com";

      });

});

<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

#을 url로 tabindex="0"바꾸고 모든 요소를 ​​포커스 가능하게 만듭니다.

행에 ID를 줄 수 있습니다. 예 :

<tr id="special"> ... </tr>

그런 다음 jquery를 사용하여 다음과 같이 말합니다.

$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})

왜 "div"태그를 사용해서는 안됩니까? ...

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>