0

我在 jsFiddle 中制作了一个看起来很棒的表格，但是当我将代码复制并粘贴到本地 .html 文件中时，我在运行它时会得到一个空白页。我一直在寻找解决方案一段时间，并且在执行 JS 后我不断看到有关页面加载的信息以及有关 $(document).ready 的信息。我是 JS 新手，所以我有点迷茫。

这是我的 jsFiddle：http: //jsfiddle.net/DBF5q/29/

这是我将代码添加到的 HTML 页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
      <title>Find User</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
      <style>
         <!-- CSS CODE HERE -->
      </style>
      <script type="text/javascript">
         <!-- JS CODE HERE --->

      </script>
   </head>
   <body>
      <div class="Web_OnlineTools_Table" >
        <table id="contact"></table>
      </div>
   </body>
</html>

我很感激你们能给我的任何解决方案或建议。谢谢你。

4

2 回答 2

2

问题可能是，在您的 jsfiddle 中，您使用/echo/json/服务来模拟 ajax 请求，当您将代码复制到本地系统时，它将不起作用。

为了解决这个

您需要像data.json使用 ajax 数据一样创建一个本地文件

{
    "accounts": [{
        "customerID": "1",
            "firstName": "Test",
            "lastName": "Test",
            "company": "Humber",
            "address": "Canada",
            "postalCode": "L7Y 3F1",
            "phoneNumber": "(905)451-1313"
    }, {
        "customerID": "2",
            "firstName": "Test",
            "lastName": "Test",
            "company": "Humber",
            "address": "Canada",
            "postalCode": "L7Y 3F2",
            "phoneNumber": "(905)451-1312"
    }               
              ]
}

并更改 ajax 代码，如

$(document).ready(function () {
    $.ajax({
        url: "<url-of-the-data.json>",
        datatype: "json"
    }).done(function (data) {
        console.log(data.accounts);
        $('#contact').append('<tr><td>' + "CustomerID" + '</td><td>' + "First Name" + '</td><td>' + "Last Name" + '</td><td>' + "Company" + '</td><td>' + "Address" + '</td><td>' + "Postal Code" + '</td><td>' + "Phone Number" + '</td></tr>');
        $(data.accounts).each(function (index, element) {
            console.log(element);

            $('#contact').append('<tr><td>' + element.customerID + '</td><td>' + element.firstName + '</td><td>' + element.lastName + '</td><td>' + element.company + '</td><td>' + element.address + '</td><td>' + element.postalCode + '</td><td>' + element.phoneNumber + '</td></tr>');
        });
    });
});

演示：Plunker

于 2013-04-19T00:27:42.350 回答
0

将示例移出 jsFiddle 的最佳方法是复制结果框架源代码（如http://doc.jsfiddle.net/faq.html中所述）

你的小提琴还有一个问题：

您已经开始使用 JS 代码$(document).ready(function () {并保持onLoad下拉菜单。这导致：

    $(window).load(function(){
    $(document).ready(function () {
于 2013-04-22T09:43:34.277 回答