从 sql 数据库中检索数据并将其显示在 table 中

Question

我正在尝试从数据库中检索团队列表，然后将它们显示在 table 中。我正在使用下划线和 JavaScript.

HTML代码

<html>
<head>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="underscore.js"></script>
    <script src="findPlayer.js" type="text/javascript"></script>
</head>

<body>
<a href="listTeams.html">Teams</a> | <a href="findPlayer.html">Find Player</a> 

<h1>Find Player [jQuery & UnderScore]</h1>

<hr>

Team Code:<input id="team" type="text" value="CLE">
Player Name:<input id="name" type="text" value="LeBron James">

<button id="find">Find</button>

<hr>

<table border=1>
    <tbody id="table">
        <tr><th>Team</th><th>Name</th><th>Age</th><th>Pts</th></tr>
    </tbody>
</table> 

</body>
</html>

ListTeams.js

$('document').ready(function(){
$.getJSON("getTeamData.php",function(data){
    console.log(data);
    _.each(data,function(element){
        $('#table').append('<tr><td>${element.NAME}</td></tr>');
    });
  });
});

这应该在我的 table 中添加 30 支 NBA 球队名称的行，但我实际得到的是其中包含 ${element.NAME} 的行。

如何让我的代码正确显示团队名称？

Answer 1

您似乎想使用 template literal 将姓名放入表中。请注意，您必须为此使用反引号 (`)，而不是单引号 (')，如下所示：

$('document').ready(function(){
    $.getJSON("getTeamData.php",function(data){
        console.log(data);
        _.each(data,function(element){
            $('#table').append(`<tr><td>${element.NAME}</td></tr>`);
        });
    });
});

如果您不想使用模板文字，则必须将字符串与 HTML 连接起来，如下所示：

$('document').ready(function(){
    $.getJSON("getTeamData.php",function(data){
        console.log(data);
        _.each(data,function(element){
            $('#table').append('<tr><td>' + element.NAME + '</td></tr>');
        });
    });
});

从 sql 数据库中检索数据并将其显示在 table 中

Retrieving data from a sql database and displaying it in a table

html

javascript

underscore.js