I play with the creation of a calculator for matrices. I see that it would be convenient to use objects, since each element of the matrix can be assigned its own name (in our case, this is a property of the object), and then these names are used to perform a set of very voluminous arithmetic operations.

However, I can’t get the value of the object properties:

var m1 = { x11: 1, x12: 2, x13: 3, x21: 4, x22: 5, x23: 6, x31: 7, x32: 8, x33: 9 }

move to table:

  <table id="matrix1"> <tr id="matrix1_tr1"> <td id="matrix1_td1"></td> <td id="matrix1_td2"></td> <td id="matrix1_td3"></td> </tr> <tr id="tr2"> <td id="matrix1_td4"></td> <td id="matrix1_td5"></td> <td id="matrix1_td6"></td> </tr> <tr id="tr2"> <td id="matrix1_td7"></td> <td id="matrix1_td8"></td> <td id="matrix1_td9"></td> </tr> </table>

I have no problems filling the table through an array. There are also no problems with filling both arrays and objects with random numbers.

I also tried to fill the array (not yet the table, the markup of which is higher, but the array for training):

  1. using the search properties for..in. But at the output the array goes empty.

  2. using the for loop. And in this case, the array is filled, but with values ​​undefined.

The question can be formulated as follows: how can I transfer the values ​​from the object m1 to the table # matrix1 ? For example, in our case, the cell with the identifier # matrix1_td4 will have the value 4, and the cell with the identifier # matrix1_td9 will have the value 9.

  • one
    No way. Only by hand. Well, or by parsing the name of the field (by the way, when there are more than 9 lines or columns, what will you do?) And if you had a regular two-dimensional array, there would be no problems - Anton Shchyrov
  • Try to dynamically build a table according to what you have. Tried it like that? - Andrew Bystrov

2 answers 2

If it is permissible to make changes to html

 var m1 = { x11: 1, x12: 2, x13: 3, x21: 4, x22: 5, x23: 6, x31: 7, x32: 8, x33: 9 } for(var key in m1) document.getElementById(key).innerHTML= m1[key] 
 <table id="matrix1"> <tr id="matrix1_tr1"> <td id="x11"></td> <td id="x12"></td> <td id="x13"></td> </tr> <tr id="tr2"> <td id="x21"></td> <td id="x22"></td> <td id="x23"></td> </tr> <tr id="tr2"> <td id="x31">3</td> <td id="x32"></td> <td id="x33"></td> </tr> </table> 

     window.onload = function(){ var m1 = { x11: 1, x12: 2, x13: 3, x21: 4, x22: 5, x23: 6, x31: 7, x32: 8, x33: 9, x41:10, x42:11, x43:12, } var table = document.createElement("table"); table.id = "matrix1_tr1"; table.border = "1px" var oneKeys = []; for(var key in m1){ var OK = key.match(/\w(\d)\d/)[1]; if(oneKeys.indexOf(OK)<0)oneKeys.push(OK); } for(var i = 0;i<oneKeys.length;i++){ var tr = document.createElement("tr"); tr.id = "matrix1_tr"+oneKeys[i]; for(var key in m1){ var OK = key.match(/\w(\d)\d/)[1]; if(OK == oneKeys[i]){ var td = document.createElement("td"); td.id = "matrix1_td"+m1[key]; td.innerHTML = m1[key]; tr.appendChild(td); } } table.appendChild(tr); } document.body.appendChild(table);} 
     <html><head></head><title></title><body></body></html>