保存 HTML 表格中的数据

Question

I am working with MVC and I am creating a dynamic table as data from @ Html.TextBoxFor is added that I have in my view, and all good so far

My question is: Any way to save my table that I create with a JS function?

Searching the web I found some examples but so far nothing works for me

My Table

<table id="mytable" class="table table-bordered table-hover ">
        <tr bgcolor="#90A8D0">
            <th>Proyecto</th>
            <th>Cuenta</th>
            <th>Sub Cuenta</th>
            <th>Beneficiario</th>
            <th>Tipo de Pago</th>
            <th>Pago en el proyecto</th>
            <th>Pago Por México</th>
            <th>Tarjeta Usuario</th>
            <th>Total de Remesa</th>
            <th>Obersvaciones</th>
            <th>Eliminar</th>

        </tr>
    </table>

So I create my dynamic table:

$(document).ready(function() {
    $('#adicionar').click(function () {
        debugger;
        var Proyecto = $("#ProyectoID option:selected").text();
        var Recurso = $("#RecursoID option:selected").text();
        var SubRecurso = $("#SubRecursoID option:selected").text();
        var Beneficiario =  document.getElementById("Beneficiario").value;
        var TipoPago = $("#TipoPagoID option:selected").text();
        var PagoProyecto = document.getElementById("PagoProyecto").value;
        var PagoMexico = document.getElementById("PagoMexico").value;
        var TarjetaUsuario = document.getElementById("TarjetaUsuario").value;
        var TotalRemesa =  parseInt(PagoProyecto) + parseInt(PagoMexico) + parseInt(TarjetaUsuario);
        var ObervacionesCuenta = document.getElementById("ObervacionesCuenta").value;
        var i = 1; //contador para asignar id al boton que borrara la fila
        var fila = '<tr id="row' + i + '"><td>' + Proyecto + '</td><td>' + Recurso + '</td><td>' + SubRecurso + '</td><td>' + Beneficiario + '</td><td>' + TipoPago + '</td><td>' + PagoProyecto + '</td><td>' + PagoMexico + '</td><td>' + TarjetaUsuario + '</td><td>' + TotalRemesa + '</td><td>' + ObervacionesCuenta + '</td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">Quitar</button></td></tr>'; //esto seria lo que contendria la fila

i++;

$('#mytable tr:first').after(fila);
$("#adicionados").text(""); //esta instruccion limpia el div adicioandos para que no se vayan acumulando
var nFilas = $("#mytable tr").length;
$("#adicionados").append(nFilas - 1);
//le resto 1 para no contar la fila del header
document.getElementById("Recurso").value ="";
document.getElementById("SubRecurso").value = "";
document.getElementById("Proyecto").value = "";
document.getElementById("Proyecto").focus();
});
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr("id");
//cuando da click obtenemos el id del boton
$('#row' + button_id + '').remove(); //borra la fila
//limpia el para que vuelva a contar las filas de la tabla
$("#adicionados").text("");
var nFilas = $("#mytable tr").length;
$("#adicionados").append(nFilas - 1);
});
});

This is an example I found on the web:

$(function () {
debugger;
$('#mytable').each(function () {
var cuotaNo= $(this).find('td').eq(0).html();
var interes = $(this).find('td').eq(1).html();
var abonoCapital = $(this).find('td').eq(2).html();
var valorCuota = $(this).find('td').eq(3).html();
var saldoCapital = $(this).find('td').eq(4).html();

$.ajax({
 async: false,
 type: "POST",
 url: "../Guardardatos",
    data:"cuotaNo="+cuotaNo+"&interes="+interes+"&abonoCapital="+abonoCapital+"&valorCuota="+valorCuota+"&saldoCapital="+saldoCapital,
 data: {valores:valores},
 success: function(data) { if(data!="");}
});
});
});

As this last example is what I am trying to save the data that is created in my table

Answer 1

In this example, create TableView , TableRowView , and TableCellView classes. Each class returns an object with an element property and render* method. TableView.element uses the table provided in your example. TableRowView.element and TableCellView.element both create new elements.

After the data from the form (not shown in your example) is POSTED and the success callback is executed: first, create a new instance of TableView ; second, create a new instance of TableRowView ; third, create new instances of TableCellView for each data property, then render the property value inside of it.

To ensure that the correct order of data elements is rendered, use columnOrder to define the table cell names, the iterate over them in the onSuccess callback. Each iteration, use the column name to access the corresponding data property.

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,
})