40420


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

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

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


CC BY-SA 3.0
2017-12-19T14:09:08.700
40390
2017-12-20T07:47:18.873
22675
question
javascript jquery
動的に作成した表にリンクを追加する方法


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

JSON例：

[code]

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

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

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

[code]

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

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


CC BY-SA 3.0
2017-12-20T07:17:03.760
40419
2017-12-20T07:17:03.760
26720
40390
answer


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

[code]

    //リンクベース
    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) ;
      });
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2017-12-20T07:47:18.873
40420
2017-12-20T07:47:18.873
40390
answer