☆こんなの
BootstrapのテーブルでURL Linkを表示してるだけ。
☆作り方
★html側(tableの定義)
<div id="bootTable" class="container"> <table class="table table-striped table-bordered "> <thead> <tr> <th>#</th> <th>名前</th> <th>URL</th> <th>***</th> </tr> </thead> <tbody> </tbody> </table> </div>
★javascript側(tableへの行設定)
var urls = []; //追加したいURLをpushで配列に追加=========================================START urls.push("https://www.google.co.jp/"); //追加したいURLをpushで配列に追加=========================================END $(function(){ setBootTable(); }); /** * テーブルへの情報設定 */ var setBootTable = function(){ for(var k in urls){ var index = Number(k) + 1; var addRow = "<tr>"; addRow += "<th scope='row'>"+ index +"</th>"; addRow += "<td>"+urls[k]+"</td>"; addRow += "<td><a href ='"+urls[k]+"'>LINK</a></td>"; addRow += "<td></td>"; addRow += "</tr>"; $("#bootTable tbody").append(addRow); } };
☆何故作ったか
ベランダでホタル族(タバコを喫う者)してるんですけれど、PCで作業してて引き続き参照したいWebページ見たい時とかに便利かなーと思い作ってみました。
もちろん以下のようなウェブサービスでもこの要件は解決すると思います。
★それでも作った事へのメリット
- 作者: 株式会社シフトブレイン
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2013/11/27
- メディア: 大型本
- この商品を含むブログ (5件) を見る
Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)
- 作者: 西畑一馬
- 出版社/メーカー: KADOKAWA/アスキー・メディアワークス
- 発売日: 2013/03/07
- メディア: 大型本
- クリック: 4回
- この商品を含むブログ (8件) を見る