在页面加载时显示HTML表格

时间:2018-01-09 06:07:33

标签: javascript jquery html

我正在尝试在页面加载时将URL响应显示在表格中。但我可以控制URL响应,但不能将它们显示在表中。这是我的js文件:

window.onload  = function (){
    var result = $.ajax({
        type: "GET",
        url:  "http://localhost:8080/impExt",
        dataType:"json", //to parse string into JSON object,
        success: function(data){
            if(data){
                var len = data.length;
                var txt = "";
                if(len > 0){
                    for(var i=0; i<len; i++){
                        if(data[i].name && data[i].ext){
                            txt += "<tr><td>"+data[i].name+"</td><td>"+data[i].ext+"</td></tr>";
                            console.log(txt);
                        }
                    }
                    if(txt != ""){
                        $("#impExtTableID tbody").html(txt).removeClass("hidden");
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    }).responseText;
    return false;//suppress natural form submission
};

我尝试了几个与我的帖子相关的答案,但没有任何作用。有人可以帮我在页面加载时显示这个表吗?如果你有任何机会需要我的索引页面,这里是:

<!DOCTYPE html>
<html lang="en" xmlns:margin-right="http://www.w3.org/1999/xhtml" xmlns:padding-bottom="http://www.w3.org/1999/xhtml"
      xmlns:width="http://www.w3.org/1999/xhtml">
<head></head>

<body>
    <table  id = "impExtTableID" class= "hidden"  >
        <thead style="width:03%">
            <th style="width:60%">Name</th>
            <th style="width:22%">Ext</th>
        </thead>
        <tbody></tbody>
    </table>

    <script src = "js/jquery-3.2.1.min.js"></script>
    <script src ="js/bootstrap.min.js"></script>
    <script src = "js/impExt.js"></script>

    </body>
</html>

1 个答案:

答案 0 :(得分:0)

hidden类需要从table中移除,而不是tbody。做到这一点

 $("#impExtTableID tbody").html(txt);
 $("#impExtTableID").removeClass("hidden");