Programing

테이블의 전체 행을 링크로 클릭 가능하게 만드는 방법은 무엇입니까?

lottogame 2020. 2. 23. 11:33
반응형

테이블의 전체 행을 링크로 클릭 가능하게 만드는 방법은 무엇입니까?

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

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

저자의 노트 I :

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

저자의 노트 II :

후손을 위해 보존되었지만 2019 년 에는 잘못된 접근 방식입니다. (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>

작업을 수행 할 때 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"해당되는 경우 와 같이 추가 역할을 추가해야 할 수도 있습니다 . 자세한 내용은 여기를 참조하십시오.

훨씬 유연한 솔루션은 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/

이 코드는 다음과 같이 전체 테이블을 클릭 할 수있게합니다. 이 예에서 링크를 클릭하면 링크를 따르지 않고 경고 대화 상자에 링크가 표시됩니다.

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로 설정됩니다.

버튼 행을 테이블 행에 추가하면 부트 스트랩이 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");
     });
});

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

뷰와 컨트롤러가 분리되어 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>

여기서 일 하기

, 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에 클릭 데이터 속성을 추가 할 필요가 없기 때문에 좋습니다. 또 다른 좋은 점은 클래스가 실제로 스타일링에만 사용해야하므로 클래스를 사용하여 클릭을 유발하지 않는다는 것입니다.

다음과 같이 표준 부트 스트랩 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.

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

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";

      });

});

<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>행에 on 이 필요한 경우 <a>태그 아래에 중첩하는 것이 유효한 HTML이 아닙니다 (브라우저에는 문제가 없지만).

    이 접근법을 구현하는 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>첫 번째 열에 만 태그를 지정하여 일반 링크로 표시하고 전체 행을 탐색하는 역할을하는 것입니다.

행에 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>

참고 URL : https://stackoverflow.com/questions/17147821/how-to-make-a-whole-row-in-a-table-clickable-as-a-link



반응형

'Programing' 카테고리의 다른 글

div를 가리킬 때 다른 요소에 영향을 미치는 방법  (0) 2020.02.23
파이썬에서 폴더의 내용을 삭제하는 방법?  (0) 2020.02.23
표준 C ++ / C ++ 11 / C를 사용하여 파일이 존재하는지 확인하는 가장 빠른 방법은 무엇입니까?  (0) 2020.02.23
vi / Vim에서 여러 줄을 선택할 때 텍스트를 어떻게 삽입합니까?  (0) 2020.02.23
JavaScript Date를 자정으로 초기화하는 가장 좋은 방법은 무엇입니까?  (0) 2020.02.23

'Programing'의 다른글

  • 현재글테이블의 전체 행을 링크로 클릭 가능하게 만드는 방법은 무엇입니까?

관련글

댓글

티스토리툴바