如何在HTML中回显console.table

时间:2019-06-10 14:17:18

标签: javascript

如何在html表中打印此结果?在浏览器的控制台部分中运行此代码时,它会提供所需的结果。

function Response(data) {

    const lines = data.split(',\"');
    const headerline = lines[0];
    const splitHeaderline = headerline.split('/');
    const headers = splitHeaderline.map(x => x.split('::')[1] || x.split(':')[1])

    const records = [];
    records.push(headers);

    for (let i = 1; i < lines.length; i++) {
        records.push(lines[i].split("\"\t\""));
    }

    return records;
}


const a = ',D.SCHEDULE.DATE::Date/D.DEFER.DATE::Defer Date/TOT.DUE::Total Due/TOT.CAP::Total Cap/TOTAL.PRINCIPAL::Principal/TOTAL.INTEREST::Interest/TOTAL.CHARGE::Charge/TOTAL.TAX::Tax/TOTAL.PAY::Total Pymt/OUTSTANDING::Outstanding,"04 SEP 2018"   "           "   "           1,000.00"   "               0.00"   "          50,000.00"   "                   "   "           1,000.00"   "                    "  "           50,000.00"  "         -50,000.00","04 OCT 2018" "           "   "          18,183.33"   "               0.00"   "          16,633.33"   "           1,550.00"   "                   "   "                    "  "                    "  "         -33,366.67","04 NOV 2018" "           "   "          18,183.33"   "               0.00"   "          16,683.33"   "           1,500.00"   "                   "   "                    "  "                    "  "         -16,683.34","04 DEC 2018" "           "   "          18,183.34"   "               0.00"   "          16,683.34"   "           1,500.00"   "                   "   "                    "  "                    "  "               0.00"'

const r = Response(a)

console.table(r)

1 个答案:

答案 0 :(得分:0)

这将有所帮助。仅供参考,记录数组不正确(附加了结果数据的快照)。...您可以先更正记录,然后使用此代码呈现enter image description here

<script>
window.addEventListener('DOMContentLoaded', (event) => {
    function Response(data) {

        const lines = data.split(',\"');
        const headerline = lines[0];
        const splitHeaderline = headerline.split('/');
        const headers = splitHeaderline.map(x => x.split('::')[1] || x.split(':')[1])

        const records = [];
        records.push(headers);

        for (let i = 1; i < lines.length; i++) {
            records.push(lines[i].split("\"\t\""));
        }

        return records;
    }


    const a = ',D.SCHEDULE.DATE::Date/D.DEFER.DATE::Defer Date/TOT.DUE::Total Due/TOT.CAP::Total Cap/TOTAL.PRINCIPAL::Principal/TOTAL.INTEREST::Interest/TOTAL.CHARGE::Charge/TOTAL.TAX::Tax/TOTAL.PAY::Total Pymt/OUTSTANDING::Outstanding,"04 SEP 2018"   "           "   "           1,000.00"   "               0.00"   "          50,000.00"   "                   "   "           1,000.00"   "                    "  "           50,000.00"  "         -50,000.00","04 OCT 2018" "           "   "          18,183.33"   "               0.00"   "          16,633.33"   "           1,550.00"   "                   "   "                    "  "                    "  "         -33,366.67","04 NOV 2018" "           "   "          18,183.33"   "               0.00"   "          16,683.33"   "           1,500.00"   "                   "   "                    "  "                    "  "         -16,683.34","04 DEC 2018" "           "   "          18,183.34"   "               0.00"   "          16,683.34"   "           1,500.00"   "                   "   "                    "  "                    "  "               0.00"'

    const r = Response(a)

    console.table(r)

    var table = document.createElement("table");
    var tr = document.createElement("tr");
    for(var i = 0; i < 10; i++){
        var th = document.createElement("th");
        th.innerHTML = r[0][i];
        tr.appendChild(th);
    }
    table.appendChild(tr);
    for(var i = 1; i < 4; i++){
        var tr = document.createElement("tr");
        for(var j = 0; j < 10; j++){
        console.log("abhisar", r[i][j])
            var td = document.createElement("td");
            td.innerHTML = r[i][j];
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    document.body.appendChild(table);
});

</script>