JQueryを使用して、同じドメイン上の別々のページにテーブルの行を1つだけ表示する

ドメインの1ページにhtmlテーブルがあり、JQueryを使用して現在の日付。どのように私は別のページからこのテーブルを供給することができJQueryを使用して、同じドメイン上の別々のページにテーブルの行を1つだけ表示する

<!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>

：私は、私はテーブルには、次のコードで同じページ上に存在する場合は、日付に基づいて必要な行を隔離することができるポイントに得ていますか？それは場合に役立ちます

表は、（合流によって自動生成された）次の形式である：テーブルでページを仮定

<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があります

http://example.com/pagewithtable

としたいページあなたがすべきことrowpage内部

http://example.com/rowpage

：URLを持つ行を含めます他のページからコンテンツを取得するJavaScriptコードを持っている：あなたの他のページで

$.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を使用して、同じドメイン上の別々のページにテーブルの行を1つだけ表示する

答えて

関連する問題