IT

html- 링크와 같은 테이블 행

lottoking 2020. 8. 24. 20:40
반응형

html- 링크와 같은 테이블 행

내 테이블 행을 쓸 수 없습니다. 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;
}

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

사용자 지정 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>

테이블 을 사용해야하는 경우 각 테이블-cell에-link를 넣을 수 있습니다.

<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>표 대신 사용할 수있는 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를 사용할 수있는 트릭을 사용할 수 있습니다.

  1. 동일한 각 TD행에 동일한 링크를 추가합니다 (링크는 셀에서 가장 바깥 쪽 요소 요소 함).

  2. 링크를 블록 요소로 변환 : 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/

이 질문에 이미 답변이 있음을 알고 있지만 여전히이 페이지의 솔루션이 마음에 들지 않습니다. JQuery를 사용하는 사람들을 위해 테이블 ​​행에 <a>태그 와 거의 동일한 동작을 제공 할 수있는 최종 솔루션을 만들었습니다 .

이것은 내 해결책입니다.

jQuery 예를 들어 표준 포함 자바 스크립트 파일에 이것을 추가 할 수 있습니다.

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

HTML 이제 HTML 내부의 모든 <tr>요소 에 사용할 수 있습니다.

<tr url="example.com">
    <td>value</td>
    <td>value</td>
    <td>value</td>
<tr>

<tr>링크로 시뮬레이션하고 싶지만 html 표준을 존중할 때 이렇게합니다.

HTML :

<table>
    <tr class="trLink">
        <td>
            <a href="#">Something</a>
        </td>
    </tr>
</table>

CSS :

tr.trLink {
    cursor: pointer;
}
tr.trLink:hover {
   /*TR-HOVER-STYLES*/
}

tr.trLink a{
    display: block;
    height: 100%;
    width: 100%;
}
tr.trLink:hover a{
   /*LINK-HOVER-STYLES*/
}

이런 식으로 누군가가 마우스를 TR에 올려 놓으면 모든 행 (및이 링크)이 호버 스타일을 갖게되며 여러 링크가 있음을 알 수 없습니다.

희망은 누군가를 도울 수 있습니다.

여기 바이올린

이렇게하면 tr에서 링크를 복제하지 않아도됩니다. 첫 번째 a에서 낚시 만하면됩니다. 

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});

//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

아마도이 라인을 따라 뭔가? JS를 사용하지만 행 (tr)을 클릭 가능하게 만드는 유일한 방법입니다.

전체 셀을 채우는 앵커 태그가있는 단일 셀이없는 경우.

그리고 어쨌든 테이블을 사용해서는 안됩니다.

이 스레드와 다른 일부를 읽은 후 자바 스크립트에서 다음 솔루션을 생각해 냈습니다.

function trs_makelinks(trs) {
    for (var i = 0; i < trs.length; ++i) {
        if (trs[i].getAttribute("href") != undefined) {
            var tr = trs[i];
            tr.onclick = function () { window.location.href = this.getAttribute("href"); };
            tr.onkeydown = function (e) {
                var e = e || window.event;
                if ((e.keyCode === 13) || (e.keyCode === 32)) {
                    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
                    this.click();
                }
            };
            tr.role = "button";
            tr.tabIndex = 0;
            tr.style.cursor = "pointer";
        }
    }
}

/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));

그것을 사용하려면 다음과 같이 클릭 할 수 있기를 원하는 href를 tr / td / th에 넣으십시오 <tr href="http://stackoverflow.com">. 그리고 tr 요소가 생성 된 후에 위의 스크립트가 실행되는지 확인하십시오 (배치 또는 이벤트 핸들러 사용).

단점은 TR이 div가있는 링크처럼 완전히 작동 display: table;하지 않으며 키보드로 선택하거나 상태 텍스트를 갖지 않는다는 것입니다. 편집 : onkeydown, role 및 tabIndex를 설정하여 키보드 탐색이 작동하도록 만들었습니다. 마우스 만 필요한 경우 해당 부분을 제거 할 수 있습니다. 그래도 마우스를 올리면 상태 표시 줄에 URL이 표시되지 않습니다.

"tr [href]"CSS 선택기로 링크 TR의 스타일을 지정할 수 있습니다.

다른 방법이 있습니다. 특히 jQuery를 사용하여 데이터를 게시해야하는 경우

$(document).on('click', '#tablename tbody tr', function()
{   
    var test="something";
    $.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){        
        window.location.href = "http://somepage";
    });
});

변수 설정은 페이지를 읽고 작업 할 수있는 SESSIONS의 변수를 설정합니다.

창가 위치에 직접 게시하는 방법을 정말로 원하지만 가능하다고 생각하지 않습니다.

감사합니다. 다음과 같이 CSS 클래스를 행에 할당하여 마우스 오버 아이콘을 변경할 수 있습니다.

<tr class="pointer" onclick="document.location = 'links.html';">

CSS는 다음과 같습니다.

<style>
    .pointer { cursor: pointer; }
</style>

행에 A 태그를 추가 할 수 있습니까?

<tr><td>
<a href="./link.htm"></a>
</td></tr>

이것이 당신이 요구하는 것입니까?

참고 URL : https://stackoverflow.com/questions/1460958/html-table-row-like-a-link

반응형

'IT' 카테고리의 다른 글

알 수없는 공급자 : $ modalProvider <-AngularJS의 $ modal 오류  (0) 2020.08.24
Node Sass는 아직 현재 환경을 지원하지 않습니다. Linux 64 비트 (거짓 포함)  (0) 2020.08.24
Min stl priority_queue를 어떻게 만들 수 있습니까?  (0) 2020.08.24
'System.DBNull'유형의 개체를 'System.String'유형으로 캐스팅 할 수 없습니다.  (0) 2020.08.24
컴파일러 오류 : memset  (0) 2020.08.24

'IT'의 다른글

  • 현재글html- 링크와 같은 테이블 행

관련글

댓글

티스토리툴바