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