如何使用标记计算HTML表中每列的平均值< script>

我有一个.ejs页面，其中包含一个表。在该表中，有4列包含数字。我想在同一页上显示这些列的平均值。
我已经设法得到了平均值，但它非常低效，并且占用了.ejs文件中的大量空间。
这是页面的外观。

下面是我为.ejs文件编写的代码（包括我编写的糟糕的平均值“计算器”）：

<!DOCTYPE html>
<html lang="en">

<html>

<head>

    <title>MTU Phone Usage Monitor</title>
    <link rel="stylesheet" href="/stylesheets/styleTable.css"></link>
</head>

<body>
    <div class="banner">
        <div class="navbar">
            <img src="\images\logo.png" class="logo">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/phone/create">New Entry</a></li>
                <li><a href="/table">View Data</a></li>
                <li><a href="/help">Help</a></li>
            </ul>
        </div>
        <form action="/phone/find" method="post"></form>
        <div class="table-wrapper">
            <table class="tableData" id="table">
                <caption>
                    <%= title %>
                </caption>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Education Usage</th>
                        <th>Shopping Usage</th>
                        <th>Searching/Browsing usage</th>
                        <th>Social Media usage</th>
                        <th>Date and Time</th>
                        <th></th>

                    </tr>
                </thead>

                <tbody>
                    <% for(var i=0; i < phonelist.length; i++) { %>
                        <tr>

                            <td>
                                <%= phonelist[i].name %>
                            </td>
                            <td>
                                <%= phonelist[i].timeEducation %>
                            </td>
                            <td>
                                <%= phonelist[i].timeShopping %>
                            </td>
                            <td>
                                <%= phonelist[i].timeBrowsing %>
                            </td>
                            <td>
                                <%= phonelist[i].timeSocial %>
                            </td>
                            <td>
                                <%= phonelist[i].createdAt %>
                            </td>
                            <td>
                                <div class="secret">
                                    <form action="/phone/delete" method="post"> <input type="String" value="<%= phonelist[i].id%>" name="id" readonly><button type="Submit">Delete</button></form>
                                    <form action="/phone/update" method="post"> <input type="String" value="<%=phonelist[i].id%>" name="id" readonly><button type="Submit">Update</button></form>
                                </div>
                            </td>

                        </tr>
                        <% } %>

        </div>
        <span id="education"></span><br>
        <span id="shopping"></span><br>
        <span id="browsing"></span><br>
        <span id="social"></span>
        <script>
            var table = document.getElementById("table"),
                avgVal, sumVal = 0,
                rowCount = table.rows.length - 1; // minus the header

            //calculate average education usage
            for (var i = 1; i < table.rows.length; i++) {
                sumVal = sumVal + parseInt(table.rows[i].cells[1].innerHTML);
            }

            document.getElementById("education").innerHTML = "Average Education = " + parseFloat(sumVal / rowCount);
            avgVal, sumVal = 0;

            //calculate average shopping usage
            for (var i = 1; i < table.rows.length; i++) {
                sumVal = sumVal + parseInt(table.rows[i].cells[2].innerHTML);
            }

            document.getElementById("shopping").innerHTML = "Average Shopping = " + parseFloat(sumVal / rowCount);
            avgVal, sumVal = 0;

            //calculate average browsing usage
            for (var i = 1; i < table.rows.length; i++) {
                sumVal = sumVal + parseInt(table.rows[i].cells[3].innerHTML);
            }

            document.getElementById("browsing").innerHTML = "Average Shopping = " + parseFloat(sumVal / rowCount);
            avgVal, sumVal = 0;

            //calculate average browsing usage
            for (var i = 1; i < table.rows.length; i++) {
                sumVal = sumVal + parseInt(table.rows[i].cells[3].innerHTML);
            }

            document.getElementById("browsing").innerHTML = "Average Shopping = " + parseFloat(sumVal / rowCount);

            avgVal, sumVal = 0;
            //calculate average social usage
            for (var i = 1; i < table.rows.length; i++) {
                sumVal = sumVal + parseInt(table.rows[i].cells[4].innerHTML);
            }

            document.getElementById("social").innerHTML = "Average Shopping = " + parseFloat(sumVal / rowCount);
        </script>

</body>


</html>

我想我可以在for循环里面放一个for循环，但是我不知道如何实现它，让所有4个平均值都显示出来。
这样，我还想在页面底部生成一个平均值的条形图。

如何缩短代码/提高代码效率？如何生成平均值条形图？

我已经设法嵌入了2个for循环。这样使脚本看起来更干净。
查看详情：

<script>
    var table = document.getElementById("table"),
        avgVal, sumVal = 0,
        rowCount = table.rows.length - 1;

    for (var x = 1; x < 5; x++) {
        for (var i = 1; i < table.rows.length; i++) {
            sumVal = sumVal + parseInt(table.rows[i].cells[x].innerHTML);

        }
        if (x == 1) {
            var text = "Average Education = ";
        } else if (x == 2) {
            var text = "Average Shopping = ";
        } else if (x == 3) {
            var text = "Average Browsing = ";
        } else if (x == 4) {
            var text = "Average Social = "
        }
        document.getElementById(String(x)).innerHTML = text + parseFloat(sumVal / rowCount);
        avgVal, sumVal = 0;

    }
</script>

然后span标签看起来像这样：

<span id="education"></span><br>
<span id="shopping"></span><br>
<span id="browsing"></span><br>
<span id="social"></span>

"现在"它们看起来像这样

<span id="1"></span><br>
<span id="2"></span><br>
<span id="3"></span><br>
<span id="4"></span>

如何使用标记计算HTML表中每列的平均值< script>

2条答案

相关问题

热门标签

最新问答