Question

我正在尝试创建一个包含两个文本框的页面，用户可以在其中选择所需的行数和列数。然后根据需要创建一个文本框的网格，添加一列和一行禁用的文本框以计算每行和每列的总和。该函数对所有行求和，但我真的很难对行进行求和。这是迄今为止的代码。

<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>

我意识到它可能很乱，但我对此很新。任何帮助或指导将非常感谢。提前谢谢。

Answer 1

为您的输入提供行和列类。然后，您可以使用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));
}

Answer 2

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

var sum = 0;
$('.classname').each(function(){
sum += $(this).val();
});

Answer 3

用于计算行总数。只更改了列总数中的一些内容以获得行总数

   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);

                }

            }

我如何使我的计算功能也总和列和文本框的行

3 个答案: