Question

说我的数组值如下。 var array = [1,2,3,4,5,6，...] 如何才能使其单击按钮可以在不同的框中一个接一个地显示数组中的项目？

例如..first click = array [0] 第二次点击=数组[1] ......等等。

到目前为止，

是我的代码。每次单击该按钮时，它只会将数组中的所有值逐个打印到同一个表中。

<tr>
    <td><p id="result2"></p></td>
    <td><p id="result3"></p></td>
    ....
</tr>

<button onclick="clickBowl()">Bowl</button>

JS：

var k = 0;

function clickBowl() {
    x = document.getElementById("result2").innerHTML = frameArr[k++];
}

Answer 1

试试这个：

HTML：

<tr id="results"></tr>

JS：

<script type="text/javascript">
    var i = 0, myArr = [0, 1, 2, 3, 4 ,5, 6, 7];
    function clickBowl() {
        if (i > myArr.length) return;
        var child = document.createElement("td");
        child.innerHTML = myArr[i++];
        document.getElementById("results").appendChild(child);
    }
</script>

这样，你定义一个全局范围var i，每次你点击碗时，你将在使用它之后添加一个，以便从你的数组中获取该键的值并附加一个{ {1}}孩子到结果行。

Answer 2

Taxicalas的回答是正确的，但我想发布这个jQuery版本：

var array = [1, 2, 3, 4, 5, 6];

$(function(){
    $("button")
    .on("click", function(){
        if(array.length === 0) return;
        $("table").append("<tr><td>" + array[0] + "</td></tr>");
        array.shift();        
    });
});

数组的shift方法删除第一个元素。

https://jsfiddle.net/ztkdvz3m/

Answer 3

在你的情况下，它将是这样的：

var k = 0;

function clickBowl() {
    document.getElementById("result" + ++k).innerHTML = frameArr[k - 1];
}

请注意，您需要为最后一个广告位添加一个值（第10帧）。

演示： https://jsfiddle.net/ed43L0ts/1/

Answer 4

以前一个答案为基础

<table>
    <tr id="tableRow">
    </tr>
</table>

    <script type="text/javascript">
    var i = 0, array = [0, 1, 2, 3, 4 ,5, 6];

    function clickBowl() {
        var currentValue = array[i++];
        var tableData = document.createElement("td");
        tableData.innerHTML = "<p id=" + currentValue + ">" + currentValue + "</p>";
        document.querySelector("#tableRow").appendChild(tableData);
       }

    array.forEach (clickBowl);    
</script>

如何使用一个按钮用数组中的下一个值填充表

4 个答案: