如何使用js为每个数组添加新列

时间:2018-05-23 10:40:47

标签: javascript html html5

我想在表列布局中显示多个响应值。
从输入我得到第一个响应,其中包含许多子项,之后对所有子项发出请求 注意:我不知道子项的数量,也不知道子项响应的长度。

到目前为止

代码:

function getallhistory(data) {
//cutting the return array by 2
var asd = vagdalo(data, 2)
var table = document.getElementById('outpout');
var tr = table.tHead;
var tb = table.getElementsByTagName('tbody')[0];
while (tr.hasChildNodes()) {
    tr.removeChild(tr.lastChild);
}
var thr = document.createElement("tr");
for (var i = 0; i < asd.length; i++) {
    console.log(asd[i][0]);
    var th = document.createElement("th");
    th.innerHTML = "" + asd[i][0] + " ";
    thr.appendChild(th);
}
tr.appendChild(thr);
$.each(asd, function (key, value) {
    var row, cell, text, r, c;
    $.ajax(
        {
            url: "/Home/TrGSNHD/",
            type: "POST",
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify({ SNR: value[0], SNRP: value[1] }),
            success: function (got) {
                console.log(got);
                for (r = 0; r < got.result.bookingValues.length; r++) {
                    row = document.createElement('tr');
                    for (c = 0; c < asd.length; c++) {
                        cell = document.createElement('td');
                        text = document.createTextNode(got.result.bookingValues[r]);
                        cell.appendChild(text);
                        row.appendChild(cell);
                    };
                    tb.appendChild(row);
                }

            },
            error: function (xhr, status, p3, p4) {
                var err = "Error " + " " + status + " " + p3;
                if (xhr.responseText && xhr.responseText[0] == "{")
                    err = JSON.parse(xhr.responseText).message;
                console.log(err);
            }
        });
});
}

我只在列中得到最后一个回复。

我还尝试制作一个多维数组,推送响应,但无法让它等待所有请求结束......

我想要的是什么:

<table style="width: 382.4px;">
<tbody>
<tr>
<td style="width: 62px;">&nbsp;request1</td>
<td style="width: 62px;">&nbsp;request2</td>
<td style="width: 62px;">&nbsp;request3</td>
<td style="width: 62px;">&nbsp;request4</td>
<td style="width: 62px;">&nbsp;request5</td>
</tr>
<tr>
<td style="width: 62px;">&nbsp;response1data1&nbsp;</td>
<td style="width: 62px;">&nbsp;response2data1&nbsp;</td>
<td style="width: 62px;">&nbsp;response3data1&nbsp;</td>
<td style="width: 62px;">&nbsp;response4data1&nbsp;</td>
<td style="width: 62px;">&nbsp;response5data1&nbsp;</td>
</tr>
<tr>
<td style="width: 62px;">&nbsp;response1data2&nbsp;</td>
<td style="width: 62px;">&nbsp;response2data2&nbsp;</td>
<td style="width: 62px;">&nbsp;response3data2&nbsp;</td>
<td style="width: 62px;">&nbsp;response4data2&nbsp;</td>
<td style="width: 62px;">&nbsp;response5data2&nbsp;</td>
</tr>
<tr>
<td style="width: 62px;">&nbsp;....</td>
<td style="width: 62px;">&nbsp;....</td>
<td style="width: 62px;">&nbsp;...</td>
<td style="width: 62px;">&nbsp;...</td>
<td style="width: 62px;">&nbsp;....</td>
</tr>
</tbody>
</table>

0 个答案:

没有答案