将生成的数据附加到模板表

时间:2015-07-23 07:51:10

标签: jquery html html-table

我想将新生成的数据放入HTML表格中。该表基于jquery模板。当我检查元素时,我可以在控制台日志中看到新生成的数据,但屏幕上没有显示任何内容。如何显示新表条目?

<!DOCTYPE html>
<html>
    <head>
        <script src="js/mail-generator.js"></script>
        <link href="css/style.css" rel="stylesheet" media="screen">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
        <script id="emailTemplate" type="text/x-jquery-tmpl">
            <tr>
                <td class="date"> ${date} </td>
                <td class="date"> ${sender} </td>
                <td class="date"> ${subject} </td>
                <td class="body"> ${body} </td>
            </tr>
        </script>
    <script>
      window.onload = function(){
            $("document").ready(function(){
                window.geemails = [];
                loadGeeMails(); //function places data into window.geemails array
                console.log(window.geemails);


$("#emailTemplate").tmpl(window.geemails).appendTo("#emailContainer");


                setInterval(function(){
                    var myMessage = getNewMessage(); //function generates new message data
                    window.geemails.push(myMessage);
                    console.log(window.geemails);   
                  $("#emailTemplate").tmpl(window.geemails).appendTo("emailContainer");
                }, 5000);
                });
        };
    </script>
    </head>
    <body>
        <table id="table">
            <tr>
                <th class="date">Date</th>
                <th class="date">Sender</th>
                <th class="date">Subject</th>
                <th class="body">Message</th>
            </tr>
            <tbody id="emailContainer">                
            </tbody>    
        </table>
    </body>
</html>

解释getNewMessage()的函数

function loadGeeMails(){
        for (var i = 0; i < 10; i++){
            var message = generateMessage();
            window.geemails.push(message);
        }
    }

    function generateMessage(date){
        var message = {};
        message.date = date || getRandomDate();
        message.subject = getRandomElement(subject);
        message.sender = getRandomElement(sender);
        message.body = getRandomElement(body);
        return message;
    }

1 个答案:

答案 0 :(得分:2)

Activity

我没有使用class ParticipantSerializer(serializers.HyperlinkedModelSerializer): device = DeviceSerializer(required=False) uuid = serializers.CharField() def validate_uuid(self, value): if value is not None and isinstance(value, basestring) and len(value) < 256: return value else: if value is not None: raise serializers.ValidationError("UUID can't be none") elif isinstance(value, basestring): raise serializers.ValidationError("UUID must be a string") elif len(value) < 256: raise serializers.ValidationError("UUID must be below 256 characters") else: raise serializers.ValidationError("UUID has failed validation") class Meta: model = Participant fields = ("uuid", "platform", "device") 函数作为回调来加载数据。刚刚使用了<script> $("document").ready(function(){ window.geemails = []; loadGeeMails(); //function places data into window.geemails array console.log(window.geemails); $("#emailTemplate").tmpl(window.geemails).appendTo("#emailContainer"); setInterval(function(){ var myMessage = getNewMessage(); //function generates new message data window.geemails.push(myMessage); console.log(window.geemails); $("#emailTemplate").tmpl(window.gmails).appendTo("emailContainer"); }, 5000); }); </script>