Question

我正在做一个异步的ajax django帖子，它返回一个带属性的vms列表。我似乎无法正确格式化HTML格式。它不会使用样式绘制表格，它只输出文本，我无法看到输出，因为调试器要么没有接收它，要么隐藏它。

这是我的控制台输出的样子

            <div id="table_name"></div>





          </tbody>
        </table>

      </div>

这是我的Javascript：

    $(document).ready(function() {
        $("#submit").click(function() {
                $.ajax({
                    url : "/vmstatus/", 
                    type : "POST",
                    dataType: "json", 
                    data : {
                        selected_customer : $("#selected_customer").val(),
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                        },
                        success : function(json) {
                            console.log('Good');

                            for (index = 0; index < json.vmlist.length; ++index) {
                                if(index < 0){
                                    document.getElementById('table_name').innerHTML = "<table class='sortable table' id='table-data'><thead><tr><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>VM Name</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''><b>PowerState </b> </th><th align='center' data-toggle='tooltip' data-placement='left' title='N'><b>Commands </b></th></tr></thead><tbody>";                                                                            
                                }else{
                                    document.getElementById('table_name').innerHTML = document.getElementById('table_name').innerHTML +'<tr><td>'+ json.vmlist[index][0] + '</td><td>' +json.vmlist[index][1] + '</td><td>' +json.vmlist[index][2] + '</td></tr>';
                                }
                            }

                            console.log( 'Server Response: ' + json.server_response + json.vmlist);
                        },
                        error : function(xhr,errmsg,err) {
                            console.log('Bad');
                            console.log(xhr.status + ": " + xhr.responseText);
                        }
                });
                return false;
        });
    });

抱歉，我不知道是否可以将它放入（）并使其成为多行。

感谢Tom我能够让它工作，但是我必须做最后一次调整，我正在写一个if语句来代替index [1]来打开或关闭。然而，它总是吸引人。三个可能的值是powerOn poweredOff或暂停我需要为所有三种状态绘制图像。

var on = '<img src={% static "icons/on2.jpg" %}>'

var off = '<img src={% static "icons/off.jpg" %}>'

console.log('Good');
$('#table_name').append("<table class='sortable table' id='table-repeat-data'><thead><tr><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>VM Name</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''><b>PowerState </b> </th><th align='center' data-toggle='tooltip' data-placement='left' title='N'><b>Commands </b></th></tr></thead><tbody>");
for (var index = 0; index < json.vmlist.length; index++) {
    if(json.vmlist[index][1] = 'poweredOn'){
        $('#table-repeat-data').append ('<tr><td>' + json.vmlist[index][0] + '</td><td>' + on + '</td><td>' + json.vmlist[index][2] + '</td></tr>');
    }else{
        $('#table-repeat-data').append ('<tr><td>' + json.vmlist[index][0] + '</td><td>' + off + '</td><td>' + json.vmlist[index][2] + '</td></tr>');
        }
}

所以我还没弄清楚如何让分拣机工作。 http://www.kryogenix.org/code/browser/sorttable/是我使用的分拣机。

另外，我动态更新信息。我动态地将vmlist [2]位置（该vmid是动态id的vmid）分配给tds，我想清空tds并在循环通过信息时重新填充。这是我的代码，但问题是控制台输出如下：

Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. jquery-1.10.2.js:5375
"Good" vmstatus:40
"update!" vmstatus:51

这是在它调用第一次更新时：

TypeError: document.getElementById(...).empty is not a function vmstatus:85
"Good" vmstatus:73
120

<script type="text/javascript">
        $(document).ready(function() {
            $("#submit").click(function() {
                    $.ajax({
                        url : "/vmstatus/", 
                        type : "POST",
                        dataType: "json", 
                        data : {
                            selected_customer : $("#selected_customer").val(),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) {
                                setInterval(update, 5000);  
                                var on = '<img src={% static "icons/on2.jpg" %}>'
                                var off = '<img src={% static "icons/off.jpg" %}>'
                                console.log('Good');
                                $('#table_name').append("<table class='sortable table' id='table-repeat-data'><thead><tr><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>VM Name</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''><b>PowerState </b> </th><th align='center' data-toggle='tooltip' data-placement='left' title='N'><b>Commands </b></th></tr></thead><tbody>");

                                for (var index = 0; index < json.vmlist.length; index++) {
                                    if(json.vmlist[index][1] == 'poweredOn'){
                                        $('#table-repeat-data').append ('<tr><td id=' + json.vmlist[index][2] + '>' + json.vmlist[index][0] + '</td><td id=' + json.vmlist[index][2] + '>' + on + '</td><td id=' + json.vmlist[index][2] + '>' + json.vmlist[index][2] + '</td></tr>');
                                    }else{
                                        $('#table-repeat-data').append ('<tr><td id=' + json.vmlist[index][2] + '>' + json.vmlist[index][0] + '</td><td id=' + json.vmlist[index][2] + '>' + off + '</td><td id=' + json.vmlist[index][2] + '>' + json.vmlist[index][2] + '</td></tr>');
                                    }
                                }

                                console.log( 'update!');
                            },
                            error : function(xhr,errmsg,err) {
                                console.log('Bad');
                                console.log(xhr.status + ": " + xhr.responseText);
                            }
                    });
                    return false;
            });
        });
function update(){
                    $.ajax({
                        url : "/vmstatus/", 
                        type : "POST",
                        dataType: "json", 
                        data : {
                            selected_customer : $("#selected_customer").val(),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) {
                                var on = '<img src={% static "icons/on2.jpg" %}>'
                                var off = '<img src={% static "icons/off.jpg" %}>'
                                console.log('Good');
                                for (var index = 0; index < json.vmlist.length; index++) {
                                    if(json.vmlist[index][1] == 'poweredOn'){
                                        document.getElementById(json.vmlist[index][2]).empty();
                                        $('#table-repeat-data').append ('<tr><td id=' + json.vmlist[index][2] + '>' + json.vmlist[index][0] + '</td><td id=' + json.vmlist[index][2] + '>' + on + '</td><td id=' + json.vmlist[index][2] + '>' + json.vmlist[index][2] + '</td></tr>');
                                    }else{
                                        document.getElementById(json.vmlist[index][2]).empty();
                                        $('#table-repeat-data').append ('<tr><td id=' + json.vmlist[index][2] + '>' + json.vmlist[index][0] + '</td><td id=' + json.vmlist[index][2] + '>' + off + '</td><td id=' + json.vmlist[index][2] + '>' + json.vmlist[index][2] + '</td></tr>');
                                    }
                                }

                                console.log( 'update!');
                            },
                            error : function(xhr,errmsg,err) {
                                console.log('Bad');
                                console.log(xhr.status + ": " + xhr.responseText);
                            }
                    });

}        

</script>

Answer 1

您的代码存在许多问题，请尝试以下方法：

function isPowered(string) {
    var onImg = '<img src="http://placekitten.com/g/200/300"/>';
    var offImg = '<img src="http://placehold.it/100x100"/>';
    return (string == 'poweredOn') ? onImg : offImg;
}

$(document).ready(function () {
    $('#table_name').append("<table class='sortable table' id='table-data' data-sortable><thead><tr><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>VM Name</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''><b>PowerState </b> </th><th align='center' data-toggle='tooltip' data-placement='left' title='N'><b>Commands </b></th></tr></thead><tbody>");

    for (var index = 0; index < json.vmlist.length; index++) {
            $('#table-data').append ('<tr><td>' + json.vmlist[index][0] + '</td><td>' + isPowered(json.vmlist[index][1]) + '</td><td>' + json.vmlist[index][2] + '</td></tr>');
    }

    Sortable.init();
});

Fiddle

ALSO ：您需要在为工具提示和可排序等事情构建表格之后重新初始化任何javascript。

使用Javascript和Jquery为列表中的每个条目动态创建表

1 个答案: