Unfortunately I do not completely understand what you intend to do:
The button at the bottom of the page is outside the table. You want to look up the row in the table based on the id in the JSON and then change the content of the first cell to the name in the JSON? Correct?
@sibertauthorFeb 17.2022 — #> @Sempervivum#1642613 You want to look up the row in the table based on the id in the JSON and then change the content of the first cell to the name in the JSON? Correct?
I select a row in a table and edit the record in a form. The response output from the form is JSON. The table can consists of several columns, so the routine that replaces the edited row may be dynamic.
@sibertauthorFeb 17.2022 — #Thank you! Do you mean that every <td> must have a class in order to target them?
``<i> </i><tr data-id=${element.user_id}> <td class="task_subject">subject 1</td> <td class="task_desc">Description</td> <td class="task_status">2</td> </tr><i> </i>`</CODE> Or is it better to delete a modified row and dynamically create a new and replace this row?<br/> In order to avoid hardcoding each <C><td>` for maybe 20 columns?
>Can it be sure that JSON deliver the columns always in the same order?
The sequence of the columns is defined by this Javascript or the template string: ``<i> </i> data.forEach(element => table.insertAdjacentHTML('beforebegin',
<tr data-id="${element.user_id}"> <td class="task-subject">${element.user_name}</td> <td class="edit"></td> <td class="more"></td> </tr> ));<i> </i>`` The sequence of the key value pairs in the JSON doesn't matter.
@sibertauthorFeb 17.2022 — #In my dreams I am hoping for the same dynamic code as populating a form, but for a table row:
``<i> </i>function fillform(jsondata) { const { elements } = document.querySelector('form') for (const [key, value] of Object.entries(data)) { const field = elements.namedItem(key) if (field) field.value = value } }<i> </i>`</CODE>
Pseudo code:
<CODE>`<i> </i>function filltablerow(jsondata) { const { elements } = document.querySelector('table tr $[id]') for (const [key, value] of Object.entries(data)) { const field = elements.namedItem(key) if (field) field.value = value } }<i> </i>``
Core sections in javascript: ``<i> </i> function filltable(data) { html = ''; data.forEach(element => { // add opening tr tag, user ID in data attribute // in order to locate the row easily later on: html += <tr data-user-id="${element.user_id}">; // for each key in current record from data: for (let key in element) { // add td tag, current key in data attribute: const val = element[key]; html += <td data-key="${key}">${val}</td>; } // add edit and more button, close tr tag: html += <td class="edit"></td><td class="more"></td></tr>; }); tBody.innerHTML = html; }<i> </i>`</CODE> <CODE>`<i> </i> function update() { // provide row for this user: const row = document.querySelector('table tr[data-user-id="' + data.user_id + '"]'); // for each key in current record from data: for (let key in data) { // update content of td element: const val = data[key]; row.querySelector('td[data-key="' + key + '"]').innerHTML = val; } }<i> </i>``
@sibertauthorFeb 19.2022 — #Thank you indeed. This solution works perfect as long as the JSON corresponds to the list columns. But how do I do if the list columns are fewer than the JSON keys? The iteration is aborted when no match is found.
This can be catched easily by checking if the key exists in the table row: ``<i> </i> function update() { // provide row for this user: const row = document.querySelector('table tr[data-user-id="' + data.user_id + '"]'); // for each key in current record from data: for (let key in data) { // update content of td element: const val = data[key], cell =row.querySelector('td[data-key="' + key + '"]') ; if (cell) cell.innerHTML = val; } }<i> </i>``