Question

我最近发布了this question以了解如何使用Parse.com在HTML / JS中创建数据表

我现在正在使用一个新模板，我正在处理一个已经存在的div表，并希望用我的Parse.com数据动态填充它。

以下是网站模板中的HTML代码：

<div class="sidebarbox">
    <div class="sidebarbox-title">
        <h3>Latest Results</h3>
    </div>
    <!-- TABLE -->
    <div class="fixture-row">
        <a href="#">
            <div class="fixture-row-left">Consectetur FC
                <div>?</div>
            </div>
            <div class="fixture-row-right">
                <div>?</div>Voluptate Cillum FC</div>
        </a>
    </div>
</div>

这是我目前拥有的HTML / javascript代码，它成功创建了一个包含我的Parse.com数据的HTML表格。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript"
        src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script>
</head>
<body>
    <h3>Current season First Team results</h3>
    <table id="first-team-results-table">
        <col width="150">
        <col width="150">
        <col width="80">
        <col width="150">
        <col width="80">
        <tbody>
            <tr>
                <th>Opposition</th>
                <th>Competition</th>
                <th>Home/Away</th>
                <th>When</th>
                <th>Score</th>
            </tr>
        </tbody>
    </table>
    <h3>Current season Reserve Team results</h3>
    <table id="reserve-team-results-table">
        <col width="150">
        <col width="150">
        <col width="80">
        <col width="150">
        <col width="80">
        <tbody>
            <tr>
                <th>Opposition</th>
                <th>Competition</th>
                <th>Home/Away</th>
                <th>When</th>
                <th>Score</th>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
src="//www.parsecdn.com/js/parse-1.2.18.min.js";
Parse.initialize("jtYdOpyKQ6SXFLqaGcpoG20yXyX9KlPHUzgg6jAJ", "TMRegOlA8nCui4sTN8d9hmQG8k8FVeESc2GnRwVH");
var firstTeamResults = Parse.Object.extend("Results");
var query = new Parse.Query(firstTeamResults);
query.equalTo("team", "DVFC Firsts");
query.descending("dateTime");
query.find(
{
    success: function(results)
    {
        for (var i = 0; i < results.length; i++) {
            var object = results[i];
            (function($) {
                $('#first-team-results-table').append('<tr><td>' 
                    + object.get('oppositionName') 
                    + '</td><td>' 
                    + object.get('competition') 
                    + '</td><td>' 
                    + object.get('homeAway') 
                    + '</td><td>' 
                    + object.get('dateTime') 
                    + '</td><td>' 
                    + object.get('score') 
                    + '</td></tr>');
            })(jQuery);
        }
    },
    error: function(error) {
        alert("Error: " + error.code + " " + error.message);
    }
});
var reserveTeamResults = Parse.Object.extend("Results");
var query = new Parse.Query(reserveTeamResults);
query.equalTo("team", "DVFC Reserves");
query.descending("dateTime");
query.find(
{
    success: function(results)
    {
        for (var i = 0; i < results.length; i++) {
            var object = results[i];
            (function($) {
                $('#reserve-team-results-table').append('<tr><td>' 
                    + object.get('oppositionName')  
                    + '</td><td>'  
                    + object.get('competition')  
                    + '</td><td>'  
                    + object.get('homeAway')  
                    + '</td><td>'  
                    + object.get('dateTime')  
                    + '</td><td>'  
                    + object.get('score')  
                    + '</td></tr>');
            })(jQuery);
        }
    },
    error: function(error) {
        alert("Error: " + error.code + " " + error.message);
    }
});
    </script>
</body>
</html>

如何将两者合并，并将Parse.com数据放入div表中的任何帮助都将受到高度赞赏。

Answer 1

我强烈建议您使用像KendoUI这样的东西（除了更高级的控件之外现在是FREE / Open-Source），它使得这样的事情非常容易。

另外作为旁注，您应该将整个脚本块包装在单个jQuery doc加载中，而不是像使用循环中的现有构造一样。

jQuery(function($) {
    // all your code here will only run once the page is loaded
    // and can use $ safely

    // ... code ...
});

至于你的问题，我不确定内容在“div表”中的含义是什么结构，但是根据你提供的内容，你可以找到<div>?</div>标签，如下所示：

$('.fixture-row-left div:first')

这假设没有其他元素class-"fixture-row-left"，否则你需要一些更可靠的方法来识别正确的元素（id属性最好）。

拥有该属性后，您可以像添加HTML一样添加HTML。

使用Javascript将Parse.com数据添加到HTML格式的div表中

1 个答案: