В этом примере создайте классы TableView, TableRowView и TableCellView. Каждый класс возвращает объект со свойством element и методом render*. TableView.element использует таблицу из вашего примера. TableRowView.element и TableCellView.element оба создают новые элементы.
После того, как данные из формы (не показанной в вашем примере) POSTED и обратный вызов success выполняется: сначала создайте новый экземпляр TableView; во-вторых, создайте новый экземпляр TableRowView; в-третьих, создайте новые экземпляры TableCellView для каждого свойства data, а затем отобразите значение свойства внутри него.
Чтобы убедиться, что отображается правильный порядок элементов данных, используйте columnOrder для определения имен ячеек таблицы, итерируйте их в обратном вызове onSuccess. На каждой итерации используйте имя столбца для доступа к соответствующему свойству data.
const columnOrder = [
'proyecto',
'cuenta',
'subCuenta',
'beneficiario',
'tipoPago',
'pagoProyecto',
'pagoMexico',
'tarjetaUsuario',
'totalRemesa',
'obersvaciones',
'elminar',
]
const TableView = () => {
let table = document.getElementByID('myTable')
return {
element: table,
renderTableRow: (element) => {
this.element.appendChild(element)
return this
}
}
}
const TableRowView = () => {
let tr = document.createElement('tr')
return {
element: tr,
renderTableCell: (element) => {
this.element.appendChild(element)
return this
},
}
}
const TableCellView = () => {
let td = document.createElement('tr')
return {
element: td,
render: (value) => {
this.element.innerHTML = value
return this
},
}
}
const onSuccess = (event) => {
let data = event.data
/*
data
-----
{
'proyecto': ??,
'cuenta': ??,
'subCuenta': ??,
'beneficiario': ??,
'tipoPago': ??,
'pagoProyecto': ??,
'pagoMexico': ??,
'tarjetaUsuario': ??,
'totalRemesa': ??,
'obersvaciones': ??,
'elminar': ??,
}
*/
let table = new TableView()
let row = new TableRow()
columnOrder.forEach((columnName) => {
let cell = new TableCellView()
let cellData = data[columnName]
cell.render(cellData)
row.renderTableCell(cell.element)
table.renderTableRow(row.element)
})
}
$.ajax({
...,
success: onSuccess,
})