从 html table 获取值

Question

我需要写一个计算逆矩阵的网站。我有一个table。我还写了一个函数来调整 table 的大小。我需要将输入的值读入二维数组 (arr)，并且我可以将此数组用作函数参数 (PrintMatrix(arr))。我是新手，不是很擅长

我的table:

<div class="row col-sm-12" id="block1">
  <div class="well well-sm col-xs-12 col-lg-11">
      <h4><b>Inverse Matrix</b></h4>
   
      <div class="row">
          <div class="col-sm-12">
              <form class="form-inline" autocomplete="off" id ="mainForm">
                  <div class="input-group">
                      <span class="input-group-addon">Size:</span>
                      <select id="mrow" onchange=" CreateTable(); " class="form-control">
                          <option value="2">2x2</option>
                          <option selected value="3">3x3</option>
                          <option value="4">4x4</option>
                          <option value="5">5x5</option>
                          <option value="6">6x6</option>
                          <option value="7">7x7</option>
                      </select>
                  </div>
              
              </form>
        
              <form autocomplete="off" id="form1">
                  <div class="row">
                      <div class="col-xs-1">
                          <h3 class="text-center">A</h3>
                      </div>
                      <div class="col-xs-9 col-sm-6" id="divA">
                          <table class="table_matrix" id="matrixA">
                              <tbody>
                                  <tr>
                                    <td><input id="a11" type="text" /></td>
                                    <td><input id="a12" type="text" /></td>
                                    <td><input id="a13" type="text" /></td>
                                  </tr>
                                  <tr>
                                    <td><input id="a21" type="text" /></td>
                                    <td><input id="a22" type="text" /></td>
                                    <td><input id="a23" type="text" /></td>
                                  </tr>
                                  <tr>
                                    <td><input id="a31" type="text" /></td>
                                    <td><input id="a32" type="text" /></td>
                                    <td><input id="a33" type="text" /></td>
                                  </tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
            
              </form>
              
          </div>
      </div>
  </div>
</div>

调整大小的函数：

function CreateTable() {
        var element = document.getElementById("matrixA");
        element.parentNode.removeChild(element);
        var columnA = document.getElementById("mrow").value;
        var rowA = document.getElementById("mrow").value;
        var doc = document;

        var fragment1 = doc.createDocumentFragment();
        for (var i = 1; i <= rowA; i++) {
            var tr = doc.createElement("tr");
            for (var j = 1; j <= columnA; j++) {
                var td = doc.createElement("td");
                td.innerHTML = "<input id='a" + i + j + "' type='text'/>";
                tr.appendChild(td);
            }
            fragment1.appendChild(tr);
        }
        var table1 = doc.createElement("table");
        table1.className = "table_matrix";
        table1.id = "matrixA";
        table1.appendChild(fragment1);
        doc.getElementById("divA").appendChild(table1);
    }

此外，我有它，但它仅适用于 3x3 table，如果您更改 table 的大小，您仍然会得到一个 3x3 数组。此外，由于某种原因，数组值是“未定义的”

var table = document.querySelector('#matrixA');
  var tbody = table.querySelector('tbody');
  var tr = tbody.querySelectorAll('tr');
  let tableArray = new Array();
  
  for (let i = 0; i < tr.length; i++) {
  tableArray[i] = new Array();
  for (let j = 0; j < tr[i].children.length; j++) {
    tableArray[i][j] = (tr[i].children[j].children.value);
  }
  }
  console.log(tableArray);

Answer 1

如果您想要一个 returns 矩阵和用户输入的函数，根据您的代码，您可以使用更简单的方法，使用您设置的 id ，像这样：

function getInputByMatrix() {
    const rows = document.getElementById('mrow').value;
    let input = [];
    for (let i = 1; i <= rows; i++) {
        input[i-1] = [];
        for (let j = 1; j <= rows; j++) {
            input[i-1][j-1] = document.getElementById(`a${i}${j}`).value;
        }
    }
    return input;
}

对于创建此函数的尝试，您只获得了 undefined 个值，因为您试图在 HTMLCollection 对象上获得 value 属性；确实是 children read-only 属性 returns，正如您从下面引用 docs 中看到的那样，这是一个实时的子元素集合。

The read-only children property returns a live HTMLCollection which contains all of the child elements of the element upon which it was called.

An HTMLCollection which is a live, ordered collection of the DOM elements which are children of node. You can access the individual child nodes in the collection by using either the item() method on the collection, or by using JavaScript array-style notation.

If the element has no element children, then children is an empty list with a length of 0.

要获得所需的行为，在这种情况下，您可以只访问集合的第一个元素，即 tableArray[i][j] = (tr[i].children[j].children[0].value);。

此外，在调整矩阵大小时，您忘记插入 tbody 标记，因此当矩阵大小时已更改时，您的函数将始终触发异常。

var fragment1 = doc.createDocumentFragment();
    // There is no <tbody>!
    for (var i = 1; i <= rowA; i++) {
        var tr = doc.createElement("tr");
        for (var j = 1; j <= columnA; j++) {
            var td = doc.createElement("td");
            td.innerHTML = "<input id='a" + i + j + "' type='text'/>";
            tr.appendChild(td);
        }
        fragment1.appendChild(tr);
    }
    var table1 = doc.createElement("table");
    table1.className = "table_matrix";
    table1.id = "matrixA";
    // Appending to the <table> tag the fragment composed by <tr> <td> ... </td> </tr>
    table1.appendChild(fragment1);
    doc.getElementById("divA").appendChild(table1);

从 html table 获取值

get values from an html table

html

javascript