我如何使我的计算函数也和列以及行文本框

how do i make my calculate function also sum columns as well as rows of textboxes

本文关键字：文本 何使 我的 计算 函数      更新时间：2023-09-26

我试图创建一个页面，有两个文本框，用户可以选择他们想要多少行和列。然后根据文本框的需求创建一个文本框网格，其中添加了禁用文本框的列和行，以计算每行和每列的总和。这个函数对所有的行求和但是我真的很难对这些行求和。下面是到目前为止的代码:

<html>
<head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8">
    <title></title>
        <script>
            function grid() {
            var row = document.getElementById("rows");
            var column = document.getElementById("columns");
            row.value = parseInt(row.value);
            column.value = parseInt(column.value);

                for (var x = 0; x <= parseInt(row.value); x++) {
                    for (var y = 0; y <= parseInt(column.value); y++){
                        var br = document.createElement("br");
                        var box = document.createElement("input")
                            box.setAttribute("type", "text");
                            box.setAttribute("size", "5");
                            box.setAttribute("id", "tb" + x + y);
                            box.setAttribute("name", "add" + x);
                            box.setAttribute("value", "0");
                            box.style.marginRight = "3px";
                            box.style.marginBottom = "3px";
                        var output = document.createElement("input");   
                            output.setAttribute("id", "output" + parseInt(x) + parseInt(y))
                            output.setAttribute("name", "result" + x);
                            output.setAttribute("disabled", "true");
                            output.setAttribute("size", "5");
                            output.style.marginRight = "3px";
                    if (x < parseInt(row.value)){
                            if (y < parseInt(column.value)){
                                document.getElementById("boxs").parentNode.appendChild(box);
                            }else{
                                document.getElementById("boxs").parentNode.appendChild(output);
                                document.getElementById("boxs").parentNode.appendChild(br);
                            }                   
                        }else{
                            document.getElementById("boxs").parentNode.appendChild(output);
                        }
                    }
                }
                //remove last box
                tbid = "output" + (row.value) + (column.value);
                nobox = document.getElementById(tbid);
                nobox.parentNode.removeChild(nobox);
            }
            </script>
            <script>
            function calculate(){
                var row = document.getElementById("rows");
                var column = document.getElementById("columns");
                row.value = parseInt(row.value);
                column.value = parseInt(column.value);
                var perform = document.getElementById("perform");
                for (var x = 0; x < parseInt(row.value); x++) {
                    var arr = document.getElementsByName("add" + x);
                    var rowTotal = 0;
                    var colTotal = 0;
                    for(var y = 0 ; y < parseInt(column.value); y++){
                        if(parseInt(arr[y].value))
                            rowTotal += parseInt(arr[y].value);
                    }
                    if(perform.value == "sum"){
                        document.getElementById("output" + x + y).value = rowTotal;
                    }else if(perform.value == "mean"){
                        document.getElementById("output" + x + y).value = rowTotal / parseInt(row.value);
                    }
                }
            }
        </script>
</head>
<body>
<div>
    <div id="boxs">
    </div>
    <div id="matrix">
        Rows<input type="text" id="rows">
        Columns<input type="text" id="columns">
        <button id="button" onclick="grid()">Create Grid</button><br><br>
        <select id="perform">
            <option value="sum">sum</option>
            <option value="mean">Mean</option>
            <option value="mode">Mode</option>
            <option value="median">Median</option>
        </select><br>
        <button id="calculate" onclick="calculate()">Calculate</button><br><br>
    </div>
</div>
</body>

我知道这可能很乱，但我是新手。任何帮助或指导将非常感激。

给输入一个行和列类。然后你可以用一个selector很容易地得到输入的集合。在此之后，只需遍历集合并计算总和即可。

<input type="text" class="row1 col1" />
<input type="text" class="row1 col2" />
<input type="text" class="row2 col1" />
<input type="text" class="row2 col2" />

var row1 = document.querySelectorAll(".row1");
var row2 = document.querySelectorAll(".row2");
var col1 = document.querySelectorAll(".col1");
var col2 = document.querySelectorAll(".col2");
var sum = 0;
for (var i = 0; i < row1.length; i++) {
    sum += parseInt(row1[i].value));
}

用于计算行总数。只是对列总数做了一些修改，得到行总数

   for (var x = 0; x < parseInt(column.value); x++) {
                var colTotal = 0;
                for(var y = 0 ; y < parseInt(row.value); y++){
                    var arr = document.getElementsByName("add" + y);
                    if(parseInt(arr[x].value))
                        colTotal += parseInt(arr[x].value);
                }
                if(perform.value == "sum"){
                    document.getElementById("output" + y + x).value = colTotal;
                }else if(perform.value == "mean"){
                    document.getElementById("output" + y + x).value = colTotal / parseInt(row.value);
                }
            }

只需在创建输入元素时为它们添加一个特定的类。之后，您可以轻松地在单个查询中选择每个输入。另外:使用jquery:)整个JS代码的计算将是这样的:

var sum = 0;
$('.classname').each(function(){
sum += $(this).val();
});
相关文章：