• ホーム
  • HS品目表
  • 日本地図
  • 世界地図
  • タイムライン
  • カレンダー
  • お問い合わせ
  • 運営者情報

HTS macam-macam

  • ホーム
  • HS品目表
  • 日本地図
  • 世界地図
  • タイムライン
  • カレンダー
  • お問い合わせ
  • 運営者情報

Javascript ES6 テンプレートリテラル

JavascriptでES6を使い始めて、PHPのようにヒアドキュメントみたいなことが出来るのがわかり、使ってみました。

+ がなくなり、すっきりわかりやすくなったので、HTML tableタグの記述とかに使っていこうと思います。

< コード例 >


  /**
   * 中分類tableタグ
   * @param {type} caption
   * @returns {String}
   */
  getMiddleResultHTML (caption) {
    
    
       
    let html = `<table id='mrestbl' class='table table-striped table-bordered table-hover table-sm'>
    <caption style='caption-side: top;'>${caption}</caption>
    <thead>
    <tr style='text-align:center;' class='bg-dark text-white'>
    <th>No</th><th>CD</th><th>説明</th>
    </tr>
    </thead>
    <tbody>`;
    
    // tr走査してtd生成 //
    let curno;
    let curfunctitle = "";
    $.each(this.records, function (i, itm) {
      
      curno = Number(i + 1);
      
      let curhtml = `<tr class='curpo mtr'>
      <td class='text-right nocell' style='color:navy; border-right-color: #555555'>
      ${curno}
      </td>
      <td class='text-right' >${itm["itemCode2"]}</td>
      <td>${itm["itemName2"]}</td>
      </tr>`;
      
      html += curhtml;
      
    });
    html += "</tbody></table>" ;
    //console.log(html);
    
    return html;
    
  }

< JSONデータソース >

[
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 1,
        "itemName2": "動物(生きているものに限る。)"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 2,
        "itemName2": "肉及び食用のくず肉"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 3,
        "itemName2": "魚並びに甲殻類、軟体動物及びその他の水棲無脊椎動物"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 4,
        "itemName2": "酪農品、鳥卵、天然はちみつ及び他の類に該当しない食用の動物性生産品"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 5,
        "itemName2": "動物性生産品(他の類に該当するものを除く。)"
    }
]

共有:

  • クリックして Twitter で共有 (新しいウィンドウで開きます)
  • Facebook で共有するにはクリックしてください (新しいウィンドウで開きます)

関連

2020-05-10 JavaScript
コメントはまだありません

teraren.com 郵便番号API

Leaflet で GeoJSON のマーカーを表示

コメントを残す コメントをキャンセル

コメントを投稿するにはログインしてください。

カテゴリー

  • API (16)
    • FORSQUARE (1)
    • Google Vision (1)
    • googleMap (4)
      • Geocorder (1)
    • Holidays (1)
    • IP GeoLocation (1)
    • Leaflet (2)
    • OpenCage Geocorder (1)
    • RESAS (内閣府 地方創生推進室) (2)
    • teraren.com (1)
    • Yahoo!スタティックマップAPI (1)
  • Database (36)
    • Firebird (4)
    • MySQL (32)
    • Oracle (2)
    • PostgreSQL (2)
    • SQLAnyWhere (1)
    • sqlite (3)
  • Info Site (3)
    • Geomedian (1)
    • 地図蔵 (1)
    • 開店閉店.com (1)
  • Java (43)
    • groovy (2)
    • gson (9)
    • jps jstat (1)
    • JSoup (2)
    • JSP (4)
    • MyBatis (8)
    • Reflection (1)
    • Selenium (2)
    • Servlet (3)
    • Swing (1)
    • Tomcat (7)
  • JavaScript (63)
    • Class (2)
    • dropzone (1)
    • iziToast (1)
    • jqGrid (26)
    • jQuery (7)
    • jQuery-ui (17)
      • AutoComplete (1)
      • conTextMenu (1)
      • Dialog (3)
      • LightBox (2)
      • Lity (1)
      • multipleSelect (5)
      • Slick (1)
    • JSON (1)
    • Numeral (2)
    • Tippy (2)
    • toastr (1)
  • Linux (16)
    • Apache (5)
    • bash (1)
    • CentOS (3)
    • curl (1)
    • Fedora (1)
    • inotify (1)
    • jq (1)
  • PHP (16)
    • GD (11)
    • PDO (2)
  • Public Data (1)
    • 郵便番号 (1)
  • Tools (16)
    • favicon抽出 (1)
    • google-images-download (1)
    • Heidi SQL (1)
    • HTML (1)
    • HttpFox (1)
    • Javascript Obfuscator (1)
    • JSON Pretty Liner (1)
    • SSL Check (1)
    • Unix Timestamp (1)
    • whois geoIP (1)
    • XShell (1)
    • ZBarImg (1)
    • フリーアイコン (1)
    • 画像 (2)
  • Trouble (9)
  • Windows (2)
    • PowerShell (1)
    • コマンドプロンプト (1)
  • WordPress (1)
  • アプリケーション (4)
  • バドミントン (3)
  • リリースニュース (7)
  • 偉人名言集 (42)
    • Steeve Jobs (1)
    • アインシュタイン (1)
    • 三島由紀夫 (2)
    • 井上ひさし (1)
    • 井深大 (1)
    • 夏目漱石 (1)
    • 大隈重信 (4)
    • 小松左京 (1)
    • 山本五十六 (1)
    • 手塚治虫 (1)
    • 星新一 (1)
    • 本田宗一郎 (3)
    • 杉原千畝 (1)
    • 松本清張 (1)
    • 樋口一葉 (1)
    • 武者小路実篤 (1)
    • 湯川秀樹 (1)
    • 石ノ森 章太郎 (1)
    • 福沢諭吉 (14)
    • 赤塚不二夫 (2)
  • 情報システム (3)
  • 書評 (1)
  • 未分類 (1)
  • 海上輸送 (3)
  • 軍事研究 (2)
    • 宇宙 (2)
  • 連絡 (3)

アーカイブ

  • 2020年5月
  • 2020年3月
  • 2020年2月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月

最近の投稿

  • date.nager.at (祝日)
  • Javascript ES2015 で連想配列を検索
  • jQuery Chosen でセレクトボックス
  • 輸出入品目表
  • 日本地図

翻訳

Proudly powered by WordPress | テーマ: Neblue by NEThemes.