无法创建带有动态标题和行的html表

时间:2019-05-21 11:42:06

标签: jquery html-table

我正在尝试使用Jquery创建HTML表。表的标题和行都来自2个不同的API。对于正文行,1 WebAPI直接将数据作为JSON提供服务,对于标头,另一个API将值存储到Web服务器文件夹中的文本文件中,我在其中存储HTML文件。我的Jquery可以从WEBAPI提取数组,也可以从2nd API创建文本文件。但是以某种方式我无法读取保存的文本文件。它抛出错误以下-

logapifull.php?query=day_t&&val=dareo
test.html?query=day_t&&val=dareo:208 {data: Array(100)}
test.html?query=day_t&&val=dareo:224 logapiheader.php?query=day_t&&val=dareo
jquery.min.js:2 **GET http://localhost:8000/log_check/test.txt 404 (Not Found)**

这是我的HTML部分-

<div style="padding-top:5px; width:65%; padding-left:2%">
                <table id="q4" class="table table-bordered table-hover table-striped" style="width:100%">

        </table>
        </div>

这是我的JQuery-

var lastFormat = 0;
var tabl = getUrlVars()["query"];
var owner = getUrlVars()["val"];
document.getElementById("header").innerText = 'Table ' + owner + '.' + tabl;
var qur = 'logapifull.php?query='+ tabl +'&&val='+ owner +'';
console.log(qur);
$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: qur,
        datatype: "JSON",
        success: function (response) {
            var data = response;
            console.log(data);
            createTable(lastFormat, data);
            }       
    });
});

function transpose() {
    if (lastFormat === 0) {
        createTable(1);
    } else {
        createTable(0);
    }
}

function createTable(format, data) {
var head = 'logapiheader.php?query='+ tabl +'&&val='+ owner +'';
console.log(head);
$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: head,
        datatype: "JSON",
        success: function (response) {
            //var data = response;
            //console.log(data);
            createTable(lastFormat, data);
            }       
    });
});
    var rows = data.data;
    var table = document.getElementById('q4');
    $.get('test.txt', function(data) {
    var heading = data;
    console.log(heading);

    if (format === 0) {
        var thead = "<thead><tr>";
        for (i = 0; i < heading.length; i++) {
            thead += "<th>" + heading[i] + "</th>"
            console.log(heading.length);
        }
        thead += "</tr></thead>";
        var tbody = "<tbody>";

        for (j = 0; j < rows.length; j++) {
            tbody += "<tr>"
            for (k = 0; k < rows[j].length; k++) {
                tbody += "<td>" + rows[j][k] + "</td>"
            }
            tbody += "</tr>"
        }
        tbody += "</tbody>"

        table.innerHTML = thead + tbody;

    } else if (format === 1) {
        var tbody = "<tbody>";
        for (i = 0; i < heading.length; i++) {
            tbody += "<tr>"
            tbody += "<th>" + heading[i] + "</th>"
            for (j = 0; j < rows.length; j++) {
                tbody += "<td>" + rows[j][i] + "</td>"
            }
            tbody += "</tr>"
        }
        tbody += "</tbody>"
        table.innerHTML = tbody;

    }
    }, 'text');
}

这是文本文件的网络响应-

Webresponse of text file

这是实际的文本文件-

enter image description here

有人可以让我知道如何阅读提到的文件,或者我在这里做错了什么?

0 个答案:

没有答案