首页 > 解决方案 > 选择前端元素后从数据库中获取对应的值

问题描述

我正在努力找出我应该使用的逻辑。问题是这样的:

有一个包含“客户”的数据库,每个客户都会在他们自己的容器中得到回显,其中显示他们的(唯一)信息,这很好用。

但是,现在我希望能够通过单击此容器中的按钮来打开编辑模式。什么是通过单击按钮来识别所述客户端的好方法,调用数据库以将客户端的数据发送到前端并打开一个模式,其中数据预填充到输入框中。

我现在坚持的部分实际上是通过单击一个按钮来获得所述客户的独特价值。

老实说,我会很感激任何帮助。

标签: javascripthtml

解决方案


该列表应该从一组 clients开始生成,如果您保留对创建该部分的对象的引用,您应该能够获取整个对象:

const clients = [
  {
    name: "John",
    surname: "Doe",
    age: 36
  },
  {
    name: "Foo",
    surname: "Bar",
    age: 25
  },
];

const app = document.querySelector('#app');

const createList = () => {
const UL = document.createElement('ul');
for(let i = 0; i < clients.length; i+=1 ){      
    let li= document.createElement('li');  li.appendChild(document.createTextNode(clients[i].name));
    li.onclick = () => console.log(clients[i].name, clients[i].surname, clients[i].age);
    
    UL.appendChild(li);
}

app.appendChild(UL);

}

createList();
<div id="app" />


推荐阅读