0

我正在尝试制作一个非常简单的 html tableTree。我没有关于 html/javascript 编程的经验，所以我正在遍历谷歌来查找我想要实现的示例。

我目前正在尝试找到一种将 json 文件传递​​到 html 文档中的简单方法，并且我已经成功地通过自己执行该代码部分并使用 ajax 和 jquery。

但是，我找到了一个使用 jqote2 的示例，尽管实现此示例给了我一个错误“未捕获的 TypeError：未定义不是函数”。我想我错过了一些东西，虽然我不知道是什么所以我希望我能在这里得到一些帮助:)

<!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 部分中的所有内容。moveover 你不能像以前那样写字符串

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>

第一个循环将把对象分解成数组，第二个循环让你得到键和值，然后用它们做你想做的事情^_^希望这有帮助

于 2015-03-13T08:49:07.897 回答