javascript - 从 javascript 对象向 html 中的表格行添加元素

Question

我有一个表，我需要通过计算 javascript 中对象中的元素数量来添加行。我有一个具有普通键和值数组的对象。

     userobject={    
                 ID: [1,2,3]
                 IP_Address: ["12.21.12.321","52.23.12.312","12.32.12.321"]
                 Server_Name: ["test1","test2","test3"]}

这就是我的对象的样子。我需要将数组中的每个元素添加到表中每行的列中。我怎样才能自动生成这个。

ID|  IP ADDRESS |SERVERNAME|
1 | 12.21.12.321|   test1  |
2 | 52.23.12.312|   test2  |
3 | 12.32.12.321|   test3  |

等等。数据需要从值数组插入到每一行中。我已经创建了表头，即列名称。我只需要帮助将每个值一一插入到每一行中。而且如果有人想要删除一行
必须根据数组中元素的数量删除一行。

有人可以帮帮我吗!？

Answer 1

您可以通过迭代数据并包含相应索引处的项目来自动生成表行。要删除一行，您可以添加一个按钮来删除与其最近的行。这是一个例子:

const userobject = {
  ID: [1,2,3],
  IP_Address: ["12.21.12.321","52.23.12.312","12.32.12.321"],
  Server_Name: ["test1","test2","test3"]
};
const [table] = document.getElementsByTagName('table');
const deleteHandler = ({ target }) => target.closest('tr').remove();
const btnTmpl = document.createElement('button');
btnTmpl.textContent = 'delete';

userobject.ID.forEach((id, i) => {
  const tr = table.insertRow();
  const btn = btnTmpl.cloneNode(true);  
  btn.onclick = deleteHandler;  
  tr.insertCell().textContent = id;
  tr.insertCell().textContent = userobject.IP_Address[i];
  tr.insertCell().textContent = userobject.Server_Name[i];
  tr.insertCell().append(btn);
  table.append(tr);
});

table {
border-collapse: collapse;
}

td, th {
border: 1px solid black;
}

<table>
<theader><tr><th>ID</th><th>IP</th><th>Server</th></tr></theader>
</table>