CSS를 사용하여 링크를 삽입하십시오

StackOverflow https://stackoverflow.com/questions/165082

  •  03-07-2019
  •  | 
  •  

문제

HTML 문서를 직접 관리하고 있으며 테이블에 텍스트 주위에 링크를 자동으로 삽입하는 방법을 찾고 있습니다. 설명하겠습니다.

<table><tr><td class="case">123456</td></tr></table>

클래스 "case"가있는 TD의 모든 텍스트를 버그 추적 시스템 (우연히 FOGBUGZ)에서 해당 케이스에 대한 링크로 자동으로 만들고 싶습니다.

그래서 나는 "123456"이이 양식의 링크로 변경되기를 바랍니다.

<a href="http://bugs.example.com/fogbugz/default.php?123456">123456</a>

그게 가능합니까? 나는 다음과 함께 놀았습니다 : pseudo elements 이후에, 그러나 케이스 번호를 반복하는 방법은없는 것 같습니다.

도움이 되었습니까?

해결책

브라우저에서 작동하는 방식이 아닙니다. 그러나 비교적 사소한 자바 스크립트로 그렇게 할 수 있습니다.

function makeCasesClickable(){
    var cells = document.getElementsByTagName('td')
    for (var i = 0, cell; cell = cells[i]; i++){
        if (cell.className != 'case') continue
        var caseId = cell.innerHTML
        cell.innerHTML = ''
        var link = document.createElement('a')
        link.href = 'http://bugs.example.com/fogbugz/default.php?' + caseId
        link.appendChild(document.createTextNode(caseId))
        cell.appendChild(link)
    }
}

당신은 같은 것을 적용 할 수 있습니다 onload = makeCasesClickable, 또는 페이지 끝에 바로 포함 시키십시오.

다른 팁

여기에 있습니다 jQuery HTML에 맞는 솔루션 게시 :

$('.case').each(function() {
  var link = $(this).html();
  $(this).contents().wrap('<a href="example.com/script.php?id='+link+'"></a>');
});

본질적으로, 각 .case 요소 위에는 요소의 내용을 잡아서 주위에 싸인 링크에 던져 넣습니다.

CSS에는 불가능하고 CSS가 어떤 식 으로든 그렇지 않습니다. 클라이언트 측 JavaScript 또는 서버 측 (선택 언어 삽입)이 이동하는 방법입니다.

CSS에서는 가능하지 않다고 생각합니다. CSS는 콘텐츠의 외관과 레이아웃에만 영향을 미쳐야합니다.

이것은 PHP 스크립트 (또는 다른 언어)의 직업처럼 보입니다. 당신은 내가하는 가장 좋은 방법을 알기에 충분한 정보를 제공하지 않았지만 다음과 같은 것일 수도 있습니다.

function case_link($id) {
    return '<a href="http://bugs.example.com/fogbuz/default.php?' . $id . '">' . $id . '</a>';
}

그런 다음 나중에 문서에서 :

<table><tr><td class="case"><?php echo case_link('123456'); ?></td></tr></table>

.html 파일을 원한다면 명령 줄에서 스크립트를 실행하고 출력을 .html 파일로 리디렉션하십시오.

이와 같은 것을 가질 수 있습니다 (JavaScript 사용). 내부에 <head>, 가지다

<script type="text/javascript" language="javascript">
  function getElementsByClass (className) {
    var all = document.all ? document.all :
      document.getElementsByTagName('*');
    var elements = new Array();
    for (var i = 0; i < all.length; i++)
      if (all[i].className == className)
        elements[elements.length] = all[i];
    return elements;
  }

  function makeLinks(className, url) {
    nodes = getElementsByClass(className);
    for(var i = 0; i < nodes.length; i++) {
      node = nodes[i];
      text = node.innerHTML
      node.innerHTML = '<a href="' + url + text + '">' + text + '</a>';
    }
  }
</script>

그리고 끝에 <body>

<script type="text/javascript" language="javascript">
  makeLinks("case", "http://bugs.example.com/fogbugz/default.php?");
</script>

나는 그것을 테스트했고 잘 작동합니다.

나는 이것이 오래된 질문이라는 것을 알고 있지만, 나는이 게시물을 우연히 발견했으며 CSS를 사용하여 하이퍼 링크를 만들기위한 솔루션을 찾아서 나 자신을 만들었습니다.

다음은 'linker ();'라는 PHP 함수입니다.

연결 : 'url.com';

#ID 정의 항목의 경우 PHP가 HTML의 모든 항목에서 링크 할 가치가있는 모든 항목에서 이것을 호출하십시오. 입력은 .CSS 파일입니다 문자열로, 사용 :

$ style_cont = file_get_contents ($ style_path);

그리고 해당 항목의 #ID. 그녀는 모든 것을 다음과 같습니다.

    function linker($style_cont, $id_html){

    if (strpos($style_cont,'connect:') !== false) {

        $url;
        $id_final;
        $id_outer = '#'.$id_html;
        $id_loc = strpos($style_cont,$id_outer);    

        $connect_loc = strpos($style_cont,'connect:', $id_loc);

        $next_single_quote = stripos($style_cont,"'", $connect_loc);
        $next_double_quote = stripos($style_cont,'"', $connect_loc);

        if($connect_loc < $next_single_quote)
        {   
            $link_start = $next_single_quote +1;
            $last_single_quote = stripos($style_cont, "'", $link_start);
            $link_end = $last_single_quote;
            $link_size = $link_end - $link_start;
            $url = substr($style_cont, $link_start, $link_size);
        }
        else
        {
            $link_start = $next_double_quote +1;
            $last_double_quote = stripos($style_cont, '"', $link_start);
            $link_end = $last_double_quote;
            $link_size = $link_end - $link_start;
            $url = substr($style_cont, $link_start, $link_size);    //link!
        }

        $connect_loc_rev = (strlen($style_cont) - $connect_loc) * -1;
        $id_start = strrpos($style_cont, '#', $connect_loc_rev);
        $id_end = strpos($style_cont,'{', $id_start);
        $id_size = $id_end - $id_start;
        $id_raw = substr($style_cont, $id_start, $id_size);
        $id_clean = rtrim($id_raw);                             //id!

        if (strpos($url,'http://') !== false) 
        {
            $url_clean = $url;
        }
        else
        {
            $url_clean = 'http://'.$url;
        };

        if($id_clean[0] == '#')
        {
            $id_final = $id_clean;

            if($id_outer == $id_final)
            {
                echo '<a href="';
                echo $url_clean;
                echo '" target="_blank">';
            };
        };
    };
};

.wrap () 또는 getElementByid ()와 같은 명령을 사용하여 개선/단축 될 수 있습니다. <a href='blah'> 부분이지만 AS를보고 있습니다 </a> 오프닝 조항없이 어쨌든 사라집니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top