Dynamic rendering of the table in real time

Question

I can not figure out.

<table id="table"></table> <script> var r = new RegExp("\x27+","g"); var str = "[[' ',' ',' '],[' ',' ',' '],[' ',' ',' ']]"; // переменная находится во внешнем файле var min_map = str.replace(r, "\x22"); // тут я меняю кавычки на двойные, потому что с сервера должен придти ответ с одинарными. var table = document.querySelector('#table'); var arr = JSON.parse(min_map); fillTable(table, arr); function fillTable(table, arr) { for (var i = 0; i < arr.length; i++) { var tr = document.createElement('tr'); for (var j = 0; j < arr[i].length; j++) { var td = document.createElement('td'); td.innerHTML = arr[i][j]; tr.appendChild(td); } table.appendChild(tr); } }

In general in the piece above, the table is generated from the JSON string.

The variable str changes its value, new, derived from the websocket. With this kind of way. But my table renders only the first state of the variable. How can I catch changes in a variable and redraw the table?

It looks like I didn’t ask the right question at all) I’m checking the external file. it's a little different. when a variable changes, a new value is added (!) on the page (in the table). that is, my spreadsheet grows with every new query. I need the contents of the 'id table' to change to a new table

even clearer: this is the case -

 table [1][2][3] [4][5][6] [7][8][9] __ запрос [s][o][h] [k][h][g] [d][t][y]

how it should look like:

 table [1][2][3] [4][5][6] [7][8][9] ___запрос table [s][o][h] [k][h][g] [d][t][y]

That is, each query, the matrix must be updated without reloading the page, without increasing the cells in the table.

Threat damn why the text is bold?

Accepted Answer · 2018-11-19T03:00:19

If you do not control the code that assigns the str variable, start a timer ( setInterval ) and compare the current value of the variable with the old one.

 function fillTable(table, arr) { console.log(arr); // delete old rows: table.innerHTML = ""; var oldRows = table.querySelectorAll("tr"); for (var i = 0; i < oldRows.length; i++) { oldRows[i].parentNode.removeChild(oldRows[i]); } // add new rows: ... td.innerHTML = arr[i][j]; // может быть td.textContent = arr[i][j]; ? ... }

In the str logs it changes, but nothing happens to the table.
I tried to hang onclick with a function call, also to no avail.
the label should not grow) The following happens: when a page is launched, a table is formed of the variable str and remains static.
On a variable, in the console, I see that the variable is changing.
I call <input value = "Click" onclick = "ws.send (ts); fillTable (table, arr);"
The table does not change, there are no errors in the console.

Dynamic rendering of the table in real time

1 answer 1

More articles: