使用 2 个数组，布局不正确

Question

function start() {
    document.getElementById("task").innerHTML="Task 8";
    var arrNames = [];
    var arrToys = [];
    var vName = "";
    var vToys = "";
    vName = prompt("Enter dog name (leave blank to stop)");
    vToys = prompt("Enter dogs toys (leave blank to stop)");
    while (vName.length > 0) {
        arrNames.push(vName);
        arrToys.push(vToys);
        vName = prompt("Enter dog name (leave blank to stop)");
        vToys = prompt("Enter dogs toys (leave blank to stop)");
    }
    var vOutput = "Dog names and No. of toys: <br/>" + arrNames.map((name, i) => `Dog ${i + 1} Name: ${name}`).join("<br/>") + arrToys.map((name) => `   No. of Toys: ${name}`).join("<br/>");
    document.getElementById("output").innerHTML=vOutput;
}

当我运行代码时，我得到了狗的名字，但玩具的数量在狗的名字下，我如何获得狗名字旁边的玩具数量？谢谢

Answer 1

这会

将输出放在具有两列和一个表标题行的表中。

var vOutput = "<table><tr><th colspan="2">Dog names and No. of toys:</th></tr><tr><td>" + arrNames.map((name, i) => `Dog ${i + 1} Name: ${name}`).join("<br/>") + "</td><td>" + arrToys.map((name) => `   No. of Toys: ${name}`).join("<br/>") + "</td></tr></table>";

这是最简单的方法，但只有当双方每只狗各使用一条线时，它才会起作用。