tableにある特定のセルの文字列を、別のlistに代入したい

Question

###前提・実現したいこと
wordpressでtableを使用していますが、特定の行の特定のセルを取得し、
別のlistに表示させたいと思っています。

###該当のソースコード
(例)

<table id="hoge">
<thead>
<tr>
<th>列A</th>
<th>列B</th>
<th>列C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</tbody>
</table>

上記tableのB1とB2の文字を取得し、下記のように別ページのlistに表示させたいと思っています。

<ul id="fuga">
<li>B1</li>
<li>B2</li>
</ul>

###試したこと
jqueryでgetElementByIdを使えば出来そうですが、別ページのlistに代入する
方法が分かりません。

###補足情報(言語/FW/ツール等のバージョンなど)
wordpressを使用しています。

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[goligo]

大変失礼致しました。ご指摘ありがとうございます。

Answer 1

別ページは無理でしょう。
テーブルがHTMLデータで公開されているなら
PHPで解釈して表示するなどやりようはありますが

Comments

[goligo]

なるほど。
私が参考にしている下記のサイトは、tableで作成されている保護犬の情報の一部を、別のページのアーカイブの中で表示させているようです。
http://chibawan.net/dogdetailscat/003_dog_child
同じように作りたいのですが、何かいい方法はありますでしょうか。

[yambejp]

他人のページからデータを取ってくる場合は大きく２つあります
(1)サーバー側がapiを提供している
つまりサービスや情報が公開されていて、それをサーバー側が拡散してほしいと
データ抽出用の仕組みをあらかじめ用意していることがあります。
その場合はapiの仕様にそった要求をすれば必要なデータを取得できます。
まずはサービス側に「apiは用意されてないか？」を確認してみてください

(2)自力でなんとかする
相手のページの情報を横取りします。PHPだとcURLなどを利用するのが妥当ですが
file_get_contentsなどで簡単に取れる場合もあります。
とったデータからHTMLを解釈し必要データを抽出します
XMLやDOMなど構造から割り出す場合と、正規表現など特定条件から割り出す場合が
考えられます

[goligo]

ご回答ありがとうございます。
説明不足で申し訳ありません。他人のページからデータをとるのではなく、あくまで自分のページから
データをとってきます。
tableデータを他のページにあるlistに移すという感じです。

Answer 2

table側のページのデータをリスト側に送りつけるんじゃなくて、リスト側がtable側のデータを取得すればいいですね。

table側がtable.html、リスト側がlist.htmlだとして、list.html内で

$.get("table.html").then(function(res){
	var table = $(res).find("#hoge");
	var B1 = table.find("tr:eq(1)").find("td:eq(1)").text();
	var B2 = table.find("tr:eq(2)").find("td:eq(1)").text();
	$("#fuga").append("<li>" + B1 + "</li><li>" + B2 + "</li>");
});

とやればいけます。

Comments

[goligo]

ご回答ありがとうございます。
おーすばらしい。早速試してみます！