get values from an html table

I need to write a website that calculates the inverse matrix. I have a table. I also wrote a function to resize the table. I need the entered values to be read into a two-dimensional array (arr), and I can use this array as a function argument (PrintMatrix(arr)). I’m new to this and I’m not very good at it

My 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 for resizing:

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

Also, i have it, but it only works for a 3×3 table and if you change the size of the table, you still get a 3×3 array. Also, for some reason, the array values are “undefined”

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

If you want a function that returns a matrix with the input of your user, based on your code, you can use a more simple approach using the ids that you’ve set, with something like this:

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

For what concern your attempt to create this function, you get only undefined values because you are attempting to get the value property on a HTMLCollection object; indeed the children read-only property returns, as you can see from the following quote from the docs, a live collection of children elements.

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.

To obtain the desired behavior, in this case, you could just access the first element of the collection, that is tableArray[i][j] = (tr[i].children[j].children[0].value);.

Also, when resizing the matrix, you forgot to insert a tbody tag, so your function will always fire an exception when the size of the matrix has been changed.

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