保存 HTML 表格中的数据

Question

我正在使用 MVC，我正在创建一个动态表，因为添加了来自 @Html.TextBoxFor 的数据，我认为这些数据都在我看来，到目前为止一切都很好

我的问题是：有什么方法可以保存我使用 JS 函数创建的表格？

在网上搜索我找到了一些示例，但到目前为止对我没有任何帮助

我的桌子

<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>

所以我创建了我的动态表：

$(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);
});
});

这是我在网上找到的一个例子：

$(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!="");}
});
});
});

因为最后一个示例是我试图保存在我的表中创建的数据

Answer 1

在此示例中，创建 TableView、TableRowView 和 TableCellView 类。每个类都返回一个带有element 属性和render* 方法的对象。 TableView.element 使用您的示例中提供的表格。 TableRowView.element 和 TableCellView.element 都创建了新元素。

在表单中的数据（未在您的示例中显示）被发布并执行success 回调之后：首先，创建TableView 的新实例；二、创建TableRowView的新实例；第三，为每个data 属性创建TableCellView 的新实例，然后在其中渲染属性值。

为确保呈现数据元素的正确顺序，请使用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,
})