0

例えば、jQueryでJSON等から表を動的に作成した時に、表の値の部分にリンクを貼る方法はないでしょうか。

 --------------------------
|都道府県|県庁所在地|
|----------------------------
|北海道 |札幌   |
|----------------------------
|・・・      |

みたいな表を作成した時に、北海道と札幌にそれぞれのWikipedia記事のリンクを貼るみたいなイメージです。
具体的な質問でなく、申し訳ないのですがご回答頂ければ幸いです。

3
  • 表のHTMLもしくはJSONデータのサンプルがあれば記載いただいた方が回答しやすいかと思います。またリンク先のURLはWikipediaなのでしょうか?それとも別のサイトの配下ページでしょうか?
    – user10259
    2017年12月20日 2:48
  • リンク先のURL情報はJSONデータにある前提でしょうか? JSONの項目がわかればと思います。
    – miiitaka
    2017年12月20日 6:05
  • お二人ともご回答ありがとうございます。特に前提も考えていない状態での質問だったので、混乱させてしまったようで申し訳在りません。お二人のおかげで何となく手法が理解できました。ありがとうございます。
    – 初心者
    2017年12月20日 14:40

2 件の回答 2

1

コメントで質問投げてましたが、両方記述しておきました。
リンク先が全て同じサイトにパラメータとして渡すのであれば特に通信上に持つ必要はありません。
ただし、それぞれが法則性の違うリンクを持つのであればJSON上に持つ必要があるかと思います。
要素数が多いのであれば通信サイズは出来る限り減らして置いたほうが無難です。

//リンクベース
var base = "https://ja.wikipedia.org/wiki/";
//sample json
var jsonstr = '[["北海道","札幌"],["青森県","青森"],["岩手県","盛岡"],["宮城県","仙台"],["秋田県","秋田"],["山形県","山形"],["福島県","福島"],["茨城県","水戸"],["栃木県","宇都宮"],["群馬県","前橋"],["埼玉県","さいたま"],["千葉県","千葉"],["東京都","東京"],["神奈川県","横浜"],["新潟県","新潟"],["富山県","富山"],["石川県","金沢"],["福井県","福井"],["山梨県","甲府"],["長野県","長野"],["岐阜県","岐阜"],["静岡県","静岡"],["愛知県","名古屋"],["三重県","津"],["滋賀県","大津"],["京都府","京都"],["大阪府","大阪"],["兵庫県","神戸"],["奈良県","奈良"],["和歌山県","和歌山"],["鳥取県","鳥取"],["島根県","松江"],["岡山県","岡山"],["広島県","広島"],["山口県","山口"],["徳島県","徳島"],["香川県","高松"],["愛媛県","松山"],["高知県","高知"],["福岡県","福岡"],["佐賀県","佐賀"],["長崎県","長崎"],["熊本県","熊本"],["大分県","大分"],["宮崎県","宮崎"],["鹿児島県","鹿児島"],["沖縄県","那覇"]]';
//json array
var json = JSON.parse(jsonstr);

//テーブル初期化
function reset(){
  $("#view tbody").empty();
}
//リンクなしテーブル作成
function defaultAdd(){
  //#viewに出力
  for(var n=0,len=json.length;n<len;n++){
    $("#view tbody").append(
      $("<tr>").append(
        $("<td>").html(json[n][0])
      ).append(
        $("<td>").html(json[n][1])
      )
    );
  }
}

//テーブル作製時にリンクを追加
function beforeAdd(){
  //#viewに出力
  for(var n=0,len=json.length;n<len;n++){
    //タグ作成
    var inner1 = '<a href="'+base+json[n][0]+'">'+json[n][0]+'</a>';
    var inner2 = '<a href="'+base+json[n][1]+'">'+json[n][1]+'</a>';
    //タグを追加
    $("#view tbody").append(
      $("<tr>").append(
        $("<td>").html(inner1)
      ).append(
        $("<td>").html(inner2)
      )
    );
  }
}

//テーブル作製後にリンクを追加
function afterAdd(){
  //既にテーブルに後で追加するなら選択して変更
  $('tbody td').each(function(idx, ele){ 
    var inner = '<a href="'+base+$(this).html() +'">'+$(this).html()+'</a>';
    $(ele).html(inner) ;
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="reset()">リセット</button><br />
<button onclick="defaultAdd()">とりあえず設置</button><br />
<button onclick="beforeAdd()">設置時</button><br />
<button onclick="afterAdd()">設置後</button>
<table id="view" border="1">
<thead>
  <th>県名</th>
  <th>県庁所在地</th>
</thead>
<tbody>
</tbody>
</table>

1

貼るリンクが無ければ何もできないので、JSONにリンク情報が入ってる前提で答えます。

JSON例:

prefectures {
  'name': '北海道',
  'capital': '札幌',
  'pLink': 'https://ja.wikipedia.org/wiki/北海道',
  'cLink': 'https://ja.wikipedia.org/wiki/札幌市'
}

のようなデータから表を作成するとします。

後は、<a href=pLink></a>で囲え"ば良いだけなので:

$('td #first').html('<a href="' + prefectures.pLink + '">' + prefectures.name + '</a>');
$('td #second').html('<a href="' + prefectures.cLink + '">' + prefectures.capital + '</a>');

みたいにすればできると思います

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。