実現したいこと
SVGファイル内で<foreignObject>を使用し<table>を記述。
<table>にdatatables([https://www.datatables.net/](https://www.datatables.net/))を適用させデータグリッドを表示させたいのですが、 以下のエラーが発生しています。 SVG内からdatatables.min.jsを読み込むことはできないのでしょうか?発生している問題・エラーメッセージ
Uncaught TypeError: Cannot set property 'cssText' of undefined jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function Uncaught TypeError: $(...).DataTable is not a function
該当のソースコード
---------------- test.svg ---------------- <?xml version="1.0" encoding="utf-8"?> <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <style> <![CDATA[ @import url(https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css); ]]> </style> <foreignObject width="80%" height="80%"> <html xmlns="http://www.w3.org/1999/xhtml"> <body xmlns="http://www.w3.org/1999/xhtml"> <table id="foo-table" class="table table-bordered"> <thead> <tr><th>No</th><th>くだもの</th></tr> </thead> <tbody> <tr><td>1</td><td>りんご</td></tr> <tr><td>2</td><td>みかん</td></tr> <tr><td>3</td><td>ぶどう</td></tr> </tbody> </table> </body> </html> </foreignObject> <script xlink:href="https://code.jquery.com/jquery-3.3.1.min.js" /> <script xlink:href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js" /> <script type="text/javascript"> /* <![CDATA[ */ jQuery(function($){ $("#foo-table").DataTable(); }); /* ]]> */ </script> </svg>
試したこと
HTML上に直接記述した場合、動作することは確認済み。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/20 09:27
2018/04/20 09:30
2018/04/23 07:38