(() => {
class App {
constructor() {
this.ObjDesigner = {};
}
Initialize() {
try {
this.Designer();
this.Create();
} catch (error) {
console.error("app.html/Initialize =>", error)
}
}
Designer(){
try {
this.ListButtons = [...document.getElementsByClassName("btnActions")];
} catch (error) {
console.error("app.html/Designer =>", error)
}
}
Create(){
try {
this.ListButtons.forEach((itemElementHTml, index) => {
itemElementHTml.dataset.id = `${index}_${new Date().getTime().toString()}`;
this[itemElementHTml.innerText] && itemElementHTml.addEventListener("click", this[itemElementHTml.innerText], false)
})
} catch (error) {
console.error("app.html/Designer =>", error)
}
}
EventAdd(event) {
try {
alert(event.target.dataset.id)
} catch (error) {
console.error("app.html/EventAdd =>", error)
}
}
EventUpdate(event) {
try {
alert(event.target.dataset.id)
} catch (error) {
console.error("app.html/EventUpdate =>", error)
}
}
EventDelete(event) {
try {
alert(event.target.dataset.id)
} catch (error) {
console.error("app.html/EventDelete =>", error)
}
}
}
const objApp = new App();
objApp.Initialize();
}
)();
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<body>
<h2>App</h2>
<table>
<tr>
<th>Field01</th>
<th>Field02</th>
<th>Field03</th>
</tr>
<tr>
<tr>
<td>Data01</td>
<td>Data01</td>
<td>
<button class="btnActions">EventAdd</button>
<button class="btnActions">EventUpdate</button>
<button class="btnActions">EventDelete</button>
</td>
</tr>
<tr>
<td>Data01</td>
<td>Data01</td>
<td>
<button class="btnActions">EventAdd</button>
<button class="btnActions">EventUpdate</button>
<button class="btnActions">EventDelete</button>
</td>
</tr>
</table>
</body>
Hola muy buenos días, puedes utilizar el API dataset
, la cual te permite se cierto modo guardar información.Esto lo puedes setear en tus mismo botones, recuerda encriptar tus datos.
Cuando dibujes datos dinámicos no es recomendable utilizar id en el control de Html, ya que puede existir "datos duplicados".