时间戳

首页 > 解决方案 > 如何使用用户输入修改数组（用 html 中的表格显示）

javascript - 如何使用用户输入修改数组（用 html 中的表格显示）

问题描述

我只想将用户输入值添加到空数组。我想要的过程是 1. 用户在 web 上输入一些数字（用 html 表格标签设计） 2. 用户输入值添加到空数组

前任。空 arr = [[],[]] 用户输入 = 1 2 3 4

然后空 arr = [[1,2],[3,4]]

我的代码在下面，我不明白出了什么问题

<!doctype html>
<html>
    <head>
    <title>Javascript HW1</title>
    <Style>
        table,th,td{
            border:1px solid black;
            border-collapse: collapse;
        }
    </Style>
</head>

<body>
    <div style="width:40%; float:left;">
        <table id="tb1">
            <tr>
                <th colspan="4">A_Matrix</th>
            </tr>
            <tr>
                <td>
                    <input type="number" id="00" oninput="fill_A(this)">
                </td>
                <td>
                    <input type="number" id="01" oninput="fill_A(this)">
                </td>
                <td>
                    <input type="number" id="02" oninput="fill_A(this)">
                </td>
                <td>
                    <input type="number" id="03" oninput="fill_A(this)">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" id="10" oninput="fill_A(this)">

                </td>
                <td>
                    <input type="number" id="11" oninput="fill_A(this)">

                </td>
                <td>
                    <input type="number" id="12" oninput="fill_A(this)">

                </td>
                <td>
                    <input type="number" id="13" oninput="fill_A(this)">

                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" id="20" oninput="fill_A(this)">

                </td>
                <td>
                    <input type="number" id="21"oninput="fill_A(this)">

                </td>
                <td>
                    <input type="number" id="22" oninput="fill_A(this)">

                </td>
                <td>
                    <input type="number" id="23" oninput="fill_A(this)">

                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" id="30" oninput="fill_A(this)">

                </td>
                <td>
                    <input type="number" id="31" oninput="fill_A(this)">

                </td>
                <td>
                    <input type="number" id="32" oninput="fill_A(this)">

                </td>
                <td>
                    <input type="number" id="33" oninput="fill_A(this)">

                </td>
            </tr>
        </table>
    </div>

    <div style="width:40%; float:right;">
        <table id="tb2">
            <tr>
                <th colspan="4">B_Matrix</th>
            </tr>
            <tr>
                <td>
                    <input type="number" id="00" oninput="fill_B(this)">
                </td>
                <td>
                    <input type="number" id="01" oninput="fill_B(this)">
                </td>
                <td>
                    <input type="number" id="02" oninput="fill_B(this)">
                </td>
                <td>
                    <input type="number" id="03" oninput="fill_B(this)">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" id="10" oninput="fill_B(this)">
                </td>
                <td>
                    <input type="number" id="11" oninput="fill_B(this)">
                </td>
                <td>
                    <input type="number" id="12" oninput="fill_B(this)">
                </td>
                <td>
                    <input type="number" id="13" oninput="fill_B(this)">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" id="20" oninput="fill_B(this)">
                </td>
                <td>
                    <input type="number" id="21" oninput="fill_B(this)">
                </td>
                <td>
                    <input type="number" id="22" oninput="fill_B(this)">
                </td>
                <td>
                    <input type="number" id="23" oninput="fill_B(this)">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" id="30" oninput="fill_B(this)">
                </td>
                <td>
                    <input type="number" id="31" oninput="fill_B(this)">
                </td>
                <td>
                    <input type="number" id="32" oninput="fill_B(this)">
                </td>
                <td>
                    <input type="number" id="33" oninput="fill_B(this)">
                </td>
            </tr>
        </table>
    </div>
    <br><br><br><br><br><br>

        <input type="button" id="res" value="Calculate matrix multiplication (A*B)" />


</body>
<script src="./matrix_mul.js"></script>
</html>




function matrix_mul(m1, m2) {
    var result = [];
    for (var i = 0; i < m1.length; i++) {
        result[i] = [];
        for (var j = 0; j < m2[0].length; j++) {
            var sum = 0;
            for (var k = 0; k < m1[0].length; k++) {
                sum += m1[i][k] * m2[k][j];
            }
            result[i][j] = sum;
        }
    }
    return result;
}

function display(m) {
    for (var r = 0; r < m.length; ++r) {
      document.write('&nbsp;&nbsp;'+m[r].join(' ')+'<br />');
    }
}

var A_Matrix = [[],[],[],[]];
var B_Matrix = [[],[],[],[]];


function fill_A(e){
    var K = 
document.getElementById(e.getAttribute('id')).getAttribute('id');
    var i = Number(K.substring(0,1));
    var j = Number(K.substring(1,2));
    A_Matrix[i][j] = Number(document.getElementById(K).value);
}

function fill_B(f){
    var a = 
document.getElementById(f.getAttribute('id')).getAttribute('id');
    var b = Number(a.substring(0,1));
    var c = Number(a.substring(1,2));
    B_Matrix[b][c] = Number(document.getElementById(a).value);
}

var aa = document.getElementById('res');
aa.addEventListener('click', function(){
var result = matrix_mul(A_Matrix, B_Matrix);
display(result);
})

标签： javascripthtmlhtml-table

解决方案

UPD：矩阵填充是正确的，而矩阵乘法是在页面加载时执行的。现在点击按钮仅显示有效。当第一个矩阵为空时，在页面加载时执行计算。要仅在单击按钮后执行计算，请移动线

var result = matrix_mul(A_Matrix, B_Matrix);

在按钮的功能内，例如：

aa.addEventListener('click', function(){ 
  var result = matrix_mul(A_Matrix, B_Matrix);
  display(result);
})

推荐阅读