質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

4135閲覧

実行環境の違いで$(xxx).xxx is not a functionが出てしまう

maguzo

総合スコア57

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/10/17 02:33

編集2018/10/17 04:06

以下の記事にあるプラグインを使用したいと考えております。
tableexport.js

自身のサイトで実行しようとした場合に、以下のエラーが出力されたため下記のコードの通り、
本家のコードどおりにローカルで実行しました。
check.html:162 Uncaught TypeError: $(...).tableExport is not a function
at check.html:162

すると同じように上記のエラーが出力されます。
各scriptの配置は適切でソース表示からリンクに飛び表示を確認しております。

  • <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  • <script src="xlsx.core.min.js"></script>
  • <script src="Blob.js"></script>
  • <script src="FileSaver.js"></script>
  • <script src="tableexport.js"></script>

正しくJqueryが読み込まれていない場合にでるエラーという認識なのですが、
原因が分からずに問い合わせさせて頂きました。

アドバイスを頂ければ幸いです。

OS:windows
実行環境:MAMP
ブラウザ:バージョン: 69.0.3497.100(Official Build) (64 ビット)
TableExport:TableExport.js v3.2.5 (http://www.clarketravis.com)

html

1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5<meta charset="utf-8"> 6<title>TableExport.js Demo</title> 7<meta name="viewport" content="width=device-width, initial-scale=1"> 8<link href='//fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> 9<link href="tableexport.css" rel="stylesheet"> 10 11<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 12<script src="xlsx.core.min.js"></script> 13<script src="Blob.js"></script> 14<script src="FileSaver.js"></script> 15<script src="tableexport.js"></script> 16<style> 17/* Normalize+ styles*/ 18* { box-sizing:border-box } 19*:before, *:after { box-sizing:inherit } 20 21:focus { 22 outline: 0; 23} 24 25html { 26 font-size: 62.5%; 27 -webkit-tap-highlight-color: rgba(0,0,0,0); 28} 29 30a { text-decoration: none } 31 32ul { 33 margin: 0; 34 padding: 0; 35 list-style: none; 36} 37 38table { 39 border-collapse: collapse; 40} 41 42button { 43 cursor: pointer; 44} 45 46/* Basic styles */ 47body { 48 margin-bottom: 5rem; 49 font-size: 1.4rem; 50 line-height: 1.4; 51 font-family: 'Roboto', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif; 52 color:#555; 53 text-align: center; 54} 55 56 57#backlink, 58#backlink a{ 59 margin-top: 5rem; 60 text-align: center; 61 font-size: 1.8rem; 62 font-weight: bold; 63 color: #14B694; 64} 65 66#backlink a:hover{ 67 color: #3CC8AB; 68} 69 70h1 { 71 margin-top: 5rem; 72 margin-bottom: 5rem; 73} 74 75h2 { 76 margin-top: 5rem; 77 margin-bottom: 2rem; 78} 79 80.description { 81 margin-bottom: 8rem; 82} 83 84footer { 85 margin-top: 2rem; 86} 87 88.credit a { 89 color: #999; 90} 91 92/* Customize for demo */ 93.box { 94 max-width: 800px; 95 margin: 0 auto; 96} 97.table { 98 width: 100%; 99} 100.table tbody tr:nth-of-type(odd) { 101 background-color: #f9f9f9; 102} 103.table th { 104 border-top: 1px solid #ddd; 105 border-left: 1px solid #ddd; 106 border-right: 1px solid #ddd; 107 border-bottom: 2px solid #ddd; 108} 109.table td { 110 border: 1px solid #ddd; 111 margin: 0; 112} 113.table th, 114.table td { 115 padding: 8px; 116} 117caption.bottom { 118 margin-top: 20px; 119} 120.button-default { 121 margin: 4px 0 4px 5px; 122 padding: 6px 12px; 123 background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%); 124 background-repeat: repeat-x; 125 border-radius: 4px; 126 border: 1px solid #ccc; 127 text-shadow: 0 1px 0 #fff; 128 color: #333; 129} 130.button-default:hover, 131.button-default:focus { 132 background-color: #e0e0e0; 133 background-position: 0 -15px; 134} 135 136</style> 137</head> 138<body> 139<div id="backlink"><a href="https://www.webtoolnavi.com/tableexport/">← 記事に戻る</a></div> 140<h1>TableExport.js Demo</h1> 141<p class="description">HTMLテーブルをxlsx、csv、txt形式でダウンロードできるjQueryプラグインです。</p> 142<section class="box"> 143<table class="table"> 144<thead> 145<tr><th>順位</th><th></th><th>一人当たりの名目GDP(USドル)</th></tr> 146</thead> 147<tbody> 148<tr><td>1位</td><td>ルクセンブルク</td><td>101,994</td></tr> 149<tr><td>2位</td><td>スイス</td><td>80,675</td></tr> 150<tr><td>3位</td><td>カタール</td><td>76,576</td></tr> 151<tr><td>4位</td><td>ノルウェー</td><td>74,822</td></tr> 152<tr><td>5位</td><td>マカオ</td><td>69,309</td></tr> 153<tr><td>6位</td><td>アメリカ</td><td>55,805</td></tr> 154<tr><td>7位</td><td>シンガポール</td><td>52,887</td></tr> 155<tr><td>8位</td><td>デンマーク</td><td>52,114</td></tr> 156<tr><td>9位</td><td>アイルランド</td><td>51,350</td></tr> 157<tr><td>10位</td><td>オーストラリア</td><td>50,961</td></tr> 158<tr><td>26位</td><td>日本</td><td>32,485</td></tr> 159</tbody> 160</table> 161</section> 162<script>$("table").tableExport({formats:["xlsx","csv","txt"],bootstrap:false});</script> 163</body> 164</html> 165

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2018/10/17 02:39

tableexport.js のバージョンはいくつですか?
maguzo

2018/10/17 03:06

本家からDLしたのではなく、参考サイトのリンク先からファイルをコピペして再現しているので、同一のバージョンで実行しているものと思われます。
maguzo

2018/10/18 02:35

了解いたしました、有難うございます。
guest

回答2

0

ベストアンサー

ライブラリの読み込みをネットから読んでみてください

html

1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 2 <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.9/xlsx.core.min.js"></script> 3 <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.3.9/js/tableexport.min.js"></script>

投稿2018/10/17 03:14

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maguzo

2018/10/17 04:11

無事解決いたしました。有難うございます。 今後のために原因を知りたいのですが、なぜ、参考サイトではcdnで読み込まずに同じバージョンを実行して適切によりされるにも関らず、ローカルではcdnでネット読み込みをしなければ実行されないのでしょうか。 完全に同一条件と思っていたのですが、私が大きくバージョンや環境、またはscriptの読み込む順番等に根本的に錯誤がある可能性があるため、お願いを申し上げた次第でございます。
yambejp

2018/10/17 05:27

ちょっとローカル環境がわからないのですが、なんらかのバージョン違いか ファイルが壊れているもしくは置き場所がちがう・・的なもののような気がします
Lhankor_Mhy

2018/10/17 08:21

個人的には『リンク先からファイルをコピペ』という表現が気になってまして、文字コード大丈夫かなあ、みたいな?
maguzo

2018/10/18 02:35

コメント有難うございます。 承知を致しました、それぞれの視点でまた確認してみます。
guest

0

jQueryが読み込まれる前に、実行してしまってるのでは?
(実行環境によって読み込みスピードは変わりますので、可能性大です)
下記でいかがでしょうか。

HTML

1<!-- 前後のHTMLの内容は省略します--> 2<script> 3$(function(){ 4 //この中で、本件の関数を実行 5}); 6</script>

投稿2018/10/17 02:58

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maguzo

2018/10/17 04:52

miyabi_takatsuk様 コメントを頂き、有難うございます。 ご指摘の方法も試してみたのですが、同じエラーが出力されました。 yambe様のご回答の方法で実現はできたのですが、現在原因を調査中でございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問