Question

我已经有一些代码可以在fiddle.net上运行了。但是当我在记事本++中尝试使用代码时，我无法选择。

这种情况的原因可能只是？例如，由于我的域名，我更改了网址链接。在fiddle.net上我有jquery库，但在Notepad ++上我没有，我将.js文件下载到我的电脑上。 Antoher问题可能是我的记事本++上的数组，它来自fiddele.net，但不能粘贴到记事本++的正确位置。

<html xmlns="http://www.w3.org/1999/xhtml">
<head> 

<script type="text/javascript" src="C:\Users\ftec805\Desktop\Deneme10\js\jquery-3.1.1.js"></script>
<script>
    //$.getJSON("new4.json", function(data) {
   // console.log(data);

    //$.getJSON('new4.json', function(data) {
    $.each(data.person, function(i, person) {
        var tblRow = "<tr><td>" + person.firstName + "</td><td>" + person.lastName + "</td><td>" + person['Email Address'] + "</td><td>" + person.City + "</td></tr>"
        $(tblRow).appendTo("#userdata tbody");
    });
    //});

    var data = {
    "person": [{
        "firstName": "Clark",
        "lastName": "Kent",
        "Email Address": "Reporter",
        "City": 20
    }, {
        "firstName": "Bruce",
        "lastName": "Wayne",
        "Email Address": "Playboy",
        "City": 30
    }, {
        "firstName": "Peter",
        "lastName": "Parker",
        "Email Address": "Photographer",
        "City": 40
         }, {
        "firstName": "Bruce",
        "lastName": "Wayne",
        "Email Address": "Playboy",
        "City": 30
    }]
} 
</script>
</head>
<body>
<div class="wrapper">
    <div class="profile">
        <table id="userdata" border="2">
            <thead>
                <th>FirstName</th>
                <th>LastName</th>
                <th>EmailAddress</th>
                <th>City</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

On fiddle.net!

Answer 1

将<script> //data JSON bla bla and appending tbody code </script>放在<table>之后。你也可以在</body>之前把它放在底部。

深层解释是here

示例：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head> 

    <script type="text/javascript" src="C:\Users\ftec805\Desktop\Deneme10\js\jquery-3.1.1.js"></script>
    </head>
    <body>

    <div class="wrapper">
        <div class="profile">
            <table id="userdata" border="2">
                <thead>
                    <th>FirstName</th>
                    <th>LastName</th>
                    <th>EmailAddress</th>
                    <th>City</th>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        var data = {
        "person": [{
            "firstName": "Clark",
            "lastName": "Kent",
            "Email Address": "Reporter",
            "City": 20
        }, {
            "firstName": "Bruce",
            "lastName": "Wayne",
            "Email Address": "Playboy",
            "City": 30
        }, {
            "firstName": "Peter",
            "lastName": "Parker",
            "Email Address": "Photographer",
            "City": 40
             }, {
            "firstName": "Bruce",
            "lastName": "Wayne",
            "Email Address": "Playboy",
            "City": 30
        }]
    } 
    //$.getJSON("new4.json", function(data) {
    // console.log(data);

    //$.getJSON('new4.json', function(data) {
        $.each(data.person, function(i, person) {
            var tblRow = "<tr><td>" + person.firstName + "</td><td>" + person.lastName + "</td><td>" + person['Email Address'] + "</td><td>" + person.City + "</td></tr>"
            $(tblRow).appendTo("#userdata tbody");
        });
        //});
    </script>
    </body>
    </html>

无论如何，我建议将脚本放在另一个文件上，然后使用<script type="text/javascript" src="your/path/to/js/myScript.js"></script>来组织你的html和你的js。

示例：

的index.html

        <html xmlns="http://www.w3.org/1999/xhtml">
    <head> 

    <script type="text/javascript" src="C:\Users\ftec805\Desktop\Deneme10\js\jquery-3.1.1.js"></script>
    </head>
    <body>

    <div class="wrapper">
        <div class="profile">
            <table id="userdata" border="2">
                <thead>
                    <th>FirstName</th>
                    <th>LastName</th>
                    <th>EmailAddress</th>
                    <th>City</th>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <script src="js/myScript.js"></script>
    </body>
    </html>

myScript.js（在js文件夹中）

        var data = {
        "person": [{
            "firstName": "Clark",
            "lastName": "Kent",
            "Email Address": "Reporter",
            "City": 20
        }, {
            "firstName": "Bruce",
            "lastName": "Wayne",
            "Email Address": "Playboy",
            "City": 30
        }, {
            "firstName": "Peter",
            "lastName": "Parker",
            "Email Address": "Photographer",
            "City": 40
             }, {
            "firstName": "Bruce",
            "lastName": "Wayne",
            "Email Address": "Playboy",
            "City": 30
        }]
    }

    $.each(data.person, function(i, person) {
                var tblRow = "<tr><td>" + person.firstName + "</td><td>" + person.lastName + "</td><td>" + person['Email Address'] + "</td><td>" + person.City + "</td></tr>"
                $(tblRow).appendTo("#userdata tbody");
            });

希望有所帮助

P.S。我建议使用Atom，Sublime Text 3或Vim或其他文本编辑器。它使我们的生活更容易编码;）

在Notepad ++中的jsfiddle.net代码

1 个答案: