JQuery를 사용하여 같은 도메인에있는 별도의 페이지에 하나의 테이블 행만 표시

도메인의 한 페이지에 html 테이블이 있는데 현재 JQuery를 사용하여 단일 행을 표시하고 싶습니다. 날짜. 나는 테이블에 다음 코드를 같은 페이지에있는 경우 내가 날짜를 기준으로 필요한 행을 분리 할 수있는 지점에 입수했습니다 :JQuery를 사용하여 같은 도메인에있는 별도의 페이지에 하나의 테이블 행만 표시

<!DOCTYPE html> 
<html> 
<head> 
<body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$.get('oncalltable.html', function(res){ 
    var d = new Date(); 

    var month = d.getMonth()+1; 
    var day = d.getDate(); 
    var year = d.getFullYear(); 

    var oncalldate = ((''+month).length<2 ? '0' : '') + month + '/' + 
    ((''+day).length<2 ? '0' : '') + day + '/' + year % 100; 

    var $tableElement = $(res.responseText).find('table.confluenceTable'); 

    var search = oncalldate; 
    var todayoncall = $("span").filter(function() { 
     return $(this).text() == search; 
    }).parents('tr'); 

console.log(oncalldate, search,todayoncall); 

$('.test span').html(todayoncall); 
}); 
</script> 

<div class="test"><p>Today: <span></span></p></div> 
</body> 
</html>

이 어떻게 다른 페이지에서이 테이블을 소스 할 수 있습니까?

http://example.com/pagewithtable

하고 원하는 페이지 : 테이블 페이지를 가정

이

<div class=\"table-wrap\"> 
<table class=\"confluenceTable\"> 
    <tbody> 
     <tr> 
      <td class=\"confluenceTd\"> </td> 
      <td class=\"confluenceTd\"> 
       <p> </p> 
      </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> 
       <p> 
        <strong>Product </strong> 
        <strong style=\"line-height: 1.4285;\">Reliability</strong> 
       </p> 
       <p> 
        <strong style=\"line-height: 1.4285;\">(
         <a href=\"/display/Product+Reliability+Team\">contact</a> info) 
        </strong> 
       </p> 
      </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> 
       <strong style=\"line-height: 1.4285;\">Product </strong> 
       <strong style=\"line-height: 1.4285;\">Reliability</strong> 
       <p> 
        <strong>(
         <a href=\"/display/Product+Reliability+Team\">contact</a> info) 
        </strong> 
       </p> 
      </td> 
      <td colspan=\"5\" class=\"confluenceTd\"> 
       <p style=\"text-align: center;\"> 
        <strong>Storage Engine</strong> 
       </p> 
       <p> </p> 
       <p> </p> 
      </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> 
       <strong>Infrastructure</strong> 
      </td> 
     </tr> 
     <tr> 
      <td colspan=\"1\" class=\"confluenceTd\"> </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> </td> 
      <td colspan=\"1\" class=\"confluenceTd\">On-Call Engineer</td> 
      <td colspan=\"1\" class=\"confluenceTd\"> 
       <span>On-Call Engineer</span> 
      </td> 
      <td colspan=\"1\" class=\"confluenceTd\">On-Call Lead</td> 
      <td colspan=\"1\" class=\"confluenceTd\"> 
       <span>On-Call Engineer</span> 
      </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> 
       <span>On-Call Lead</span> 
      </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> </td> 
     </tr> 
     <tr> 
      <td class=\"confluenceTd\"> 
       <p> </p> 
      </td> 
      <td class=\"confluenceTd\"> 
       <p> </p> 
      </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> 
       <p> 
        <strong>6 am – </strong> 
        <strong style=\"line-height: 1.4285;\">2 pm UTC </strong> 
       </p> 
       <p> 
        <strong style=\"line-height: 1.4285;\">(
         <strong>8 hours)</strong> 
        </strong> 
       </p> 
       <p> 
        <strong>SpB : 9 am – 5 pm</strong> 
       </p> 
      </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> 
       <p> 
        <strong>2 pm – 10 pm UTC</strong> 
       </p> 
       <p> 
        <strong>(8 hours)</strong> 
       </p> 
       <p> 
        <strong>Boston: 9 am – 5 pm EST </strong> 
       </p> 
       <p> 
        <strong>/ 10am – 6pm EDT</strong> 
       </p> 
      </td> 
      <td class=\"confluenceTd\"> 
       <p> 
        <strong>6 am UTC – 2 pm UTC (
         <strong>8 hours)</strong> 
        </strong> 
       </p> 
       <p> 
        <strong>SpB         : 9 am – 5 pm</strong> 
       </p> 
       <p> 
        <strong>Shanghai : 2 pm – 10 pm</strong> 
       </p> 
      </td> 
      <td class=\"confluenceTd\"> 
       <p> 
        <strong>2 pm UTC – 10 pm UTC (8 hours)</strong> 
       </p> 
       <p> 
        <strong>Boston: 9 am – 5 pm EST/10am – 6pm EDT</strong> 
       </p> 
       <p> 
        <strong> 
         <strong>Texas: 8 am – 4 pm CST/9am – 5pm CDT</strong> 
        </strong> 
       </p> 
      </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> </td> 
      <td class=\"confluenceTd\"> 
       <p> 
        <strong>10 pm UTC – 6 am UTC (8 hours)</strong> 
       </p> 
       <p> 
        <strong>Seattle: 2 pm – 10 pm PST/3pm – 11pm PDT</strong> 
       </p> 
      </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> </td> 
      <td colspan=\"1\" class=\"confluenceTd\"> 
       <p> 
        <strong>4 am UTC </strong> 
       </p> 
       <p> 
        <strong>(24 hours)</strong> 
       </p> 
      </td> 
     </tr> 
     <tr> 
      <td class=\"highlight-grey confluenceTd\" colspan=\"1\" data-highlight-colour=\"grey\"> 
       <span>09/03/16</span> 
      </td> 
      <td class=\"highlight-grey confluenceTd\" colspan=\"1\" data-highlight-colour=\"grey\">Sat</td> 
      <td class=\"highlight-grey confluenceTd\" colspan=\"1\" data-highlight-colour=\"grey\"> </td> 
      <td class=\"highlight-grey confluenceTd\" colspan=\"1\" data-highlight-colour=\"grey\"> </td> 
      <td class=\"highlight-grey confluenceTd\" colspan=\"1\" data-highlight-colour=\"grey\"> 
       <p> 
        <a class=\"confluence-userlink user-mention\" data-username=\"user1\" href=\"/display/~user1\" data-linked-resource-id=\"40407182\" data-linked-resource-version=\"2\" data-linked-resource-type=\"userinfo\" data-base-url=\"https://wikipage.com:8443\">user1</a> 
       </p> 
      </td> 
      <td class=\"highlight-grey confluenceTd\" colspan=\"1\" data-highlight-colour=\"grey\"> 
       <a class=\"confluence-userlink user-mention\" data-username=\"user2\" href=\"/display/~user2\" data-linked-resource-id=\"24217157\" data-linked-resource-version=\"2\" data-linked-resource-type=\"userinfo\" data-base-url=\"https://wikipage.com:8443\">user2</a> 
      </td> 
      <td class=\"highlight-grey confluenceTd\" colspan=\"1\" data-highlight-colour=\"grey\"> 
       <a class=\"confluence-userlink user-mention\" data-username=\"user3\" href=\"/display/~user3\" data-linked-resource-id=\"54956587\" data-linked-resource-version=\"2\" data-linked-resource-type=\"userinfo\" data-base-url=\"https://wikipage.com:8443\">user3</a> 
      </td> 
      <td class=\"highlight-grey confluenceTd\" colspan=\"1\" data-highlight-colour=\"grey\"> 
       <a class=\"confluence-userlink user-mention\" data-username=\"user4\" href=\"/display/~user4\" data-linked-resource-id=\"30030931\" data-linked-resource-version=\"1\" data-linked-resource-type=\"userinfo\" data-base-url=\"https://wikipage.com:8443\">user4</a> 
      </td> 
      <td class=\"highlight-grey confluenceTd\" colspan=\"1\" data-highlight-colour=\"grey\"> 
       <a class=\"confluence-userlink user-mention\" data-username=\"user5\" href=\"/display/~user5\" data-linked-resource-id=\"30023135\" data-linked-resource-version=\"2\" data-linked-resource-type=\"userinfo\" data-base-url=\"https://wikipage.com:8443\">user5</a> 
       <span> </span> 
      </td> 
      <td class=\"highlight-grey confluenceTd\" colspan=\"1\" data-highlight-colour=\"grey\"> 
       <a class=\"confluence-userlink user-mention\" data-username=\"user6\" href=\"/display/~user6\" data-linked-resource-id=\"35622102\" data-linked-resource-version=\"3\" data-linked-resource-type=\"userinfo\" data-base-url=\"https://wikipage.com:8443\">user6</a> 
      </td> 
     </tr> 
     <tr>

출처

2016-09-15 nastri83

다른 페이지를, 당신은 AJAX 요청이 페이지의 내용 (즉, 테이블 포함) 가야하고 얻을 수있는 내용을 구문 분석 할 수 행 –

그래, 어떻게? 이것은 jquery에서 처음 만나는 것입니다. – nastri83

URL을 가지고 그 도움이된다면

표 (합류에 의해 자동 생성)의 형식은 다음과 당신이해야 rowpage 내부

http://example.com/rowpage

: URL을 가지고있는 행을 포함합니다 다른 페이지에서 콘텐츠를 가져 자바 스크립트 코드가 있습니다

$.get('http://example.com/pagewithtable', function(res){ 
    var $tableElement = $(res.responseText).find('table.confluenceTable'); 
    //then do what you need to do to select the row that you want 
    var rowHtml = $('tr:first', $tableElement); //an example 
    .... 
    .... 


    //finally append it to a div in the page 
    $('.some-div').append(rowHtml); 
});

출처

2016-09-15 20:33:33

나는 todayoncall에 대해 여전히 null이됩니다. 질문에서 내 코드를 업데이트했습니다. – nastri83

JQuery를 사용하여 같은 도메인에있는 별도의 페이지에 하나의 테이블 행만 표시

답변

관련 문제