Question

我尝试根据建议重新创建，以便于阅读。

    <ul>
        <li id="tens">Output 10 count</li>
        <li id="twts">Output 20 count</li>
        <li id="thtrs">Output 30 count</li>
        <li id="frtys">Output 40 count</li>
        <li id="fifs">Output 50 count</li>
    </ul>
    <p id="arrayout"></p>
    <script>
        var seatingArray = [
            [10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
            [10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
            [10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
            [10, 10, 20, 20, 20, 20, 20, 20, 10, 10],
            [10, 10, 20, 20, 20, 20, 20, 20, 10, 10],
            [10, 10, 20, 20, 20, 20, 20, 20, 10, 10],
            [20, 20, 30, 30, 40, 40, 30, 30, 20, 20],
            [20, 30, 30, 40, 50, 50, 40, 30, 30, 20],
            [30, 40, 50, 50, 50, 50, 50, 50, 40, 30]
        ];

        // global counters for the seats

        <!--  Not optimized for IE but should work in FF, Chrome and Safari-->
        function start() {
            for (var i = 0; i < 9; i++) {
                for (var j = 0; j < 10; j++) {
                    //places a click event on every aserisk in the table
                    document.getElementById(i.toString() + j.toString()).addEventListener("click", processClick, false);
                } //for
            } //for


            // need reference to each list item

        } //start


        function processClick(evt) {
            var cellID = evt.target.getAttribute("id"); // obtains the id value of the asterisk clicked
            //evt.target.innerHTML = cellID;                // displays the id value of the asterisk clicked
            evt.target.innerHTML = "$$"; // writes $$ string back to html table cell

            seatingArray[parseInt(cellID.charAt(0))][parseInt(cellID.charAt(1))] = "$$";
            console.log(parseInt(cellID.charAt(0)) + " " + parseInt(cellID.charAt(1)));
            console.log(seatingArray[parseInt(cellID.charAt(0))][parseInt(cellID.charAt(1))]);
            outputArray(seatingArray);
            updatecount(seatingarray)
            evt.target.removeEventListener("click", processClick, false);
        } //endcheck

        //create other functions if needed here

        function updatecount(thearray) {
            var fifty = 0
            if (result.innherhtml = "50") document.getelementbyId('fifs').innerhtml =
                'fifty + 1'

        }

        // display array contents
        function outputArray(theArray) {
            var results = "<table>";

            // iterates through the set of one-dimensional arrays
            for (var row in theArray) {
                results += "<tr>";

                // iterates through the elements of each one-dimensional array
                for (var column in theArray[row]) {
                    results += "<td>" + theArray[row][column] + "</td>";
                } // end inner for

                results += "</tr>"; // close row
            } // end outer for

            results += "</table>"; // close table

            document.getElementById("arrayout").innerHTML = results;
        } // end function outputArray

        // runs start function once
        window.addEventListener("load", start, false);
    </script>
</body>

我正在尝试增加在创建的表中单击的每个数字的每个计数：

    <li id="tens">Output 10 count</li>
    <li id="twts">Output 20 count</li>
    <li id="thtrs">Output 30 count</li>
    <li id="frtys">Output 40 count</li>
    <li id="fifs">Output 50 count</li>

所以有一个2d数组，当脚本执行时会显示，当你点击每个单元格时，它将基本上卖掉“座位”，而$$将取代它的价格。我只是不确定如何根据每个座位的销售量来更新列表。任何建议都非常欢迎！

Answer 1

以下是您要添加到代码中的快速示例。我更新了您的updatecount功能。我更改了processClick以将跨度值传递给updatecount。然后，我没有为当前计数解析该文本，而是向HTML添加了一个自定义属性来保存当前值。希望这有助于您开始前进。有很大的空间来改进这些代码，但我并不想重写你所做的一切，并决定坚持你提出的问题。

我还清理了一下你的小提琴并把相关的部分移到他们应该进入的部分。随意发表评论并询问你不确定的东西。

小提琴：http://jsfiddle.net/AtheistP3ace/dcaLsx24/1/

HTML：

<li data-current="0" id="tens">Output 10 count</li>
<li data-current="0" id="twts">Output 20 count</li>
<li data-current="0" id="thtrs">Output 30 count</li>
<li data-current="0" id="frtys">Output 40 count</li>
<li data-current="0" id="fifs">Output 50 count</li>

JS：

function updatecount(value) {
    var current, text;
    if (value == '10') {
        current = document.getElementById('tens');
        text = 'Output 10 count: ';
    }
    else if (value == '20') {
        current = document.getElementById('twts');
        text = 'Output 20 count: ';
    }
    else if (value == '30') {
        current = document.getElementById('thtrs');
        text = 'Output 30 count: ';
    }
    else if (value == '40') {
        current = document.getElementById('frtys');
        text = 'Output 40 count: ';
    }
    else if (value == '50') {
        current = document.getElementById('fifs');
        text = 'Output 50 count: ';
    }
    var currentValue = current.getAttribute('data-current');
    currentValue = parseInt(currentValue, 10) + 1;
    current.innerHTML = text + currentValue;
    current.setAttribute('data-current', currentValue);
}

Answer 2

希望这就是你所需要的。

http://jsfiddle.net/dcaLsx24/2/

现在尝试点击单元格，他们应该更新内部的计数

我添加了以下2件事

var counterObj = {
    "10": {counter:0, liId:"tens"},
    "20":{counter:0, liId:"twts"},
    "30":{counter:0, liId:"thtrs"},
    "40":{counter:0, liId:"frtys"},
    "50":{counter:0, liId:"fifs"}
};

function updateCountList ( cellContent) {
    var listCounter = counterObj[cellContent];
    if(listCounter) {
        listCounter.counter++;
        document.getElementById(listCounter.liId).textContent = "Output " + cellContent + " count = " + listCounter.counter;
    }
}

调用

中的updateCountList

function processClick(evt) {
    var cellID = evt.target.getAttribute("id");     // obtains the id value of the asterisk clicked

    updateCountList(evt.target.textContent);
///....

Answer 3

您可能希望更轻松地为您的表格设置样式。我建议看看flexbox。循环是节省时间和救生员。这是让你入门的东西。 http://jsfiddle.net/inspiredtolive/g8mk63yj/

for (var i = 0; i < seatingArray.length; i++) {
    var row = document.createElement("row");
    document.body.appendChild(row);
    for (var j = 0; j < seatingArray[i].length; j++) {
        var block = document.createElement("div");
        var id = String(i) + String(j);
        block.setAttribute("id", id);
        block.innerHTML = seatingArray[i][j];
        row.appendChild(block);
        block.addEventListener("click", function (evt) {
            document.getElementById(evt.target.id).innerHTML = "$$";
        }, false);
    }
}

如何使用onclick事件更新列表

3 个答案: