0

私は本当に単純なhtml tableTreeを作ろうとしています。私はhtml/javascriptプログラミングに関する経験がないので、私が達成しようとしているものの例を見つけるためにグーグルを横断しています。

私は現在、jsonファイルをhtmlドキュメントに渡す簡単な方法を見つけようとしています。そのコード部分を自分で実行し、ajaxとjqueryを使用することで成功しました。

ただし、jqote2 を使用した例を見つけましたが、この例を実装すると、「Uncaught TypeError: undefined is not a function」というエラーが表示されます。私は何かが足りないと思いますが、何がわからないので、ここで助けを得られることを願っています:)

<!DOCTYPE html>
<html>
<head>
  <script src="jquery/jquery-1.11.2.min.js"></script>
  <script src="jqote2/jquery.jqote2.js"></script>
  <script type="text/html" id="template">
  <![CDATA[
    <tr>
      <td class="no"><%= j+1 %></td>
      <td class="title"><%= this.Title %></td>
    </tr>
  ]]>
  </script> 
  <!-- 2 load the theme CSS file -->
  <title>Test</title>
  </head>

  <body>
  <script type="text/javascript">
    var jsondata = [{"Title": "Dr.", "Surname": "House", "Firstname":  "Geronimo"},{"Title": "Mr.", "Surname": "Franklin", "Firstname": "Benjamin"}];
    // Now call jQote on the template providing your json data
    $('#template').jqote(jsondata).appendTo($('#users'));
  </script>

  <div>
    <table id="users"></table>
  </div>

</body>
</html>

http://aefxx.com/jquery-plugin/jqote/にある例に基づいて、このコードを作成しました。

このコードを実行すると、エラーが発生します

$('#template').jqote(jsondata).appendTo($('#users'));

だから私は何が欠けているのですか:)私はチェックしましたが、含まれているファイルは存在し、パスは正しいです。

4

1 に答える 1

0

CData セクションに問題があります 「<」や「&」などの文字は、XML 要素では使用できません。

「<」は、パーサーが新しい要素の開始と解釈するため、エラーを生成します。

「&」は、パーサーが文字エンティティの開始と解釈するため、エラーを生成します。

JavaScript コードなどの一部のテキストには、「<」または「&」文字が多数含まれています。エラーを回避するために、スクリプト コードを CDATA として定義できます。

CDATA セクション内のすべてがパーサーによって無視されます。あなたがしたように文字列を書くことはできません

http://www.w3schools.com/xml/xml_cdata.asp

json オブジェクトからテーブルを描画すると、次のようになります。

<!DOCTYPE html>
<html>
<head>
  <script src="jquery-1.11.2.min.js"></script>

  <!-- 2 load the theme CSS file -->
  <title>Test</title>
  </head>


  <script type="text/javascript">
    var jsondata = [{"Title": "Dr.", "Surname": "House", "Firstname":  "Geronimo"},{"Title": "Mr.", "Surname": "Franklin", "Firstname": "Benjamin"}];
    // Now call jQote on the template providing your json data

    $( document ).ready(function() {
       $.each( jsondata, function( key, value ) {
            $.each( value, function( k, v ) {
                    $("#"+k).html(v);

            });
    });
});

  </script>

   <body>
  <table>
  <tr>
  <td id="Title"></td>
  <td id="Surname"></td>
  <td id="House"></td>
  <td id="Firstname"></td>
  </tr>
  </table>

</body>
</html>

最初のループではオブジェクトを配列に分割し、2 番目のループではキーと値を取得して、それらを使用して必要なことを行います ^_^ このヘルプを願っています

于 2015-03-13T08:49:07.897 に答える