使用数组从表单生成输出。如何更改此输出的顺序？答案

【问题标题】：Using arrays to produce an output from a form. How do i change the order of this output?使用数组从表单生成输出。如何更改此输出的顺序？
【发布时间】：2017-09-26 00:17:16
【问题描述】：

下面的代码产生一个输出

苹果、橙切片，切丁选项1 选项2 选项3 选项4 , 选项1 选项2 选项3 选项4

我希望输出是

苹果切片选项1 选项2 选项3 选项4

橙色切丁选项1 选项2 选项3 选项4

addOptions() 从表单创建数组，showOptions() 用数组替换元素。

为了实现这种类型的输出需要进行哪些更改？请看这个sn-p

var fruit
var prep
var saladsArr = [];
var salad = {
    "theFruit": []
    , "thePrep": []
    , "theOpt": []
};


function clickFruit() {
    fruit = document.getElementById('theTable').theFruitRad.value;
    console.log(fruit);
}

function clickPrep() {
    prep = document.getElementById('theTable').thePrepRad.value;
    console.log(prep);
}
// Create Arrays
function addOrder() {
    addOptions(document.getElementById('theTable'));
}

function addOptions(frm) {
    var buffTop = "";
    for (var i in frm.theFruitRad) {
        if (frm.theFruitRad[i].checked) salad.theFruit.push(frm.theFruitRad[i].value);
    }
    for (var i in frm.thePrepRad) {
        if (frm.thePrepRad[i].checked) salad.thePrep.push(frm.thePrepRad[i].value);
    }
    for (var i in frm.chkbox) {
        if (frm.chkbox[i].checked) {
            buffTop += frm.chkbox[i].value + " &nbsp;"
        }
    }
    salad.theOpt.push(buffTop);
    console.log(saladsArr.length);
    saladsArr.push(salad);
    resetForms();
}

function showOptions(frm) {
    
    for (var i = 0; i < saladsArr.length; i++) {
        var salad = saladsArr[i];
        var html_salad = "<div class='resFruit" + [i] + "'>" + salad.theFruit + "</div>";
        html_salad += "<div class='resPrep" + [i] + "'>" + salad.thePrep + "</div>";
        html_salad += "<div class='resOpt" + [i] + "'>" + salad.theOpt + "</div><br>";
        
    }
    document.getElementById('finResults').innerHTML = html_salad;
    
}

function test() {
    console.log(salad);
    console.log(salad.theFruit);
    console.log(salad.thePrep);
    console.log(salad.theOpt);
}

function resetForms() {
    document.getElementById("theTable").reset();
}

        div{
        background:white;
    }
    .resFruit {
        height: auto;
        background: yellow;
        color: black;
        width: auto;
    }
    
    .resPrep {
        height: auto;
        background: green;
        color: black;
        width: auto;
    }
    
    .resOpt {
        height: auto;
        background: orange;
        color: black;
        width: auto;
    }
    
    table {
        color: white;
    }
    
    #left {
        background: red;
        width: 50%;
        height: 100%;
        float: left;
        color: white;
    }
    
    #right {
        background: blue;
        width: 50%;
        height: 100%;
        float: left;
        color: white;
    }

#inputButton {
    vertical-align: bottom;
}

<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel=stylesheet type="text/css" href="temp.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="temp1.js"></script>
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

    <div id="left">
        <form id="theTable"> <b><u>Fruit</u></b>
            <br>
            <label class="rad">
                <input required required type="radio" name="theFruit" id="theFruitRad" onclick="clickFruit()" value="Apple" /><i></i> Apple</label>
            <br>
            <label class="rad">
                <input required type="radio" name="theFruit" id="theFruitRad" onclick="clickFruit()" value="Orange" /> <i></i> Orange</label>
            <br>
            <label class="rad">
                <input required type="radio" name="theFruit" id="theFruitRad" onclick="clickFruit()" value="Banana" /> <i></i> Banana</label>
            <br>
            <label class="rad">
                <input required type="radio" name="theFruit" id="theFruitRad" onclick="clickFruit()" value="Pear" /> <i></i> Pear</label>
            <br>  <b><u><br>Prep</u></b>
            <br>
            <label class="rad">
                <input type="radio" name="prep" id="thePrepRad" onclick="clickPrep()" value="Sliced" /> <i></i> Sliced</label>
            <br>
            <label class="rad">
                <input type="radio" name="prep" id="thePrepRad" onclick="clickPrep()" value="Diced" /> <i></i> Diced</label>
            <br>
            <label class="rad">
                <input type="radio" name="prep" id="thePrepRad" onclick="clickPrep()" value="Peeled" /> <i></i> Peeled</label>
            <br>
            <label class="rad">
                <input type="radio" name="prep" id="thePrepRad" onclick="clickPrep()" value="Whole" /> <i></i> Whole</label>
            <br> <b><u>Options</u></b><br>
        
            <label class="ckb">
                <input type="checkbox" name="chkbox1" id="chkbox" value="Option1" /> <i></i> Option1</label>
            <br>
            <label class="ckb">
                <input type="checkbox" name="chkbox1" id="chkbox" value="Option2" /> <i></i> Option2</label>
            <br>
            <label class="ckb">
                <input type="checkbox" name="chkbox1" id="chkbox" value="Option3" /> <i></i> Option3</label>
            <Br>
            <label class="ckb">
                <input type="checkbox" name="chkbox1" id="chkbox" value="Option4" /> <i></i> Option4</label>
            </Br>
        </form>
    </div>
    <div id="right">
        <div id="finResults"></div>
        <center>
            <input id="inputButton" type="button" value="Add" onClick="addOrder()" />
            <input id="inputButton" type="button" value="test" onClick="test()" />
            <input id="inputButton" type="button" value="Show Results" onClick="showOptions(document.getElementById('theTable'))" /> </center>
    </div>
</body>

</html>

【问题讨论】：

frm长什么样子，能发一下模型吗？
请包含 HTML
我更新了代码以显示它已被解决.. 谢谢！
我回滚了您的最新编辑。请永远不要解决您的问题中的问题，因为这样问答就不再有意义了。另外，请不要为您的问题添加任何解决方案。解决方案进入答案部分。

标签： javascript arrays

【解决方案1】：

为了获得所需的输出，您只需向您的test 函数添加一个for 循环，如下所示：

function test() {
    console.log(salad);
    for(var i = 0; i < salad.theFruit.length; i++) {
      console.log(salad.theFruit[i] || '');
      console.log(salad.thePrep[i] || '');
      console.log(salad.theOpt[i] || '');
      console.log('');
    }
}

希望这就是你想要的。

当你打印一个数组时，它会一次打印所有元素，用逗号分隔。在您的代码中就是这种情况，它一次打印所有水果，然后是准备和选择。

添加一个循环，我们一次打印所有 3 个数组中特定索引处的元素。因此，fruits 数组中第一个位置的元素被打印，然后是 preps 数组中的第一个元素和 opts 数组。然后是所有 3 个数组中第二个位置的元素，依此类推。

【讨论】：